~~最终版

i18n/locales/zh-CN.json

@@ -69,43 +69,43 @@
     "zyxg": {
       "title": "中烟国际（香港）有限公司",
       "content": "中烟国际（香港）有限公司位于中国香港，2019年6月在香港联交所上市（中烟香港，6055.HK），是中国烟草体系内唯一的烟草业务上市公司，主要从事卷烟、烟叶、新型烟草制品等烟草类产品国际业务",
-      "phone": "",
+      "phone": "+852 26209500",
       "website": "www.ctihk.com.hk"
     },
     "tzyc":{
       "title": "天泽烟草有限责任公司",
       "content": "天泽烟草有限责任公司位于津巴布韦哈拉雷，主要从事烟叶采购、出口等经营业务。",
-      "phone": ""
+      "phone": "+263 719754365/7"
     },
     "zybx":{
       "title": "中烟国际巴西有限公司",
       "content": "中烟国际巴西有限公司位于巴西南里奥格兰德州南圣克鲁斯，与联一国际巴西公司共同投资成立中巴烟草出口股份有限公司，主要从事烟叶采购、出口等经营业务。",
-      "phone": ""
+      "phone": "+55 51981867090"
     },
     "zybn":{
       "title": "中烟国际（北美）股份有限公司",
       "content": "中烟国际（北美）股份有限公司位于美国北卡罗来纳州罗利，主要从事烟叶采购、出口等经营业务。",
-      "phone": ""
+      "phone": "+1 (919)307-8449"
     },
    "zyag":{
       "title": "中烟国际阿根廷有限公司",
       "content": "中烟国际阿根廷有限公司位于阿根廷萨尔塔，主要从事烟叶采购、出口等经营业务。",
-      "phone": ""
+      "phone": "+54 93875139158"
     },
     "zyzd":{
       "title": "中烟国际（中东）有限公司",
       "content": "中烟国际（中东）有限公司位于阿联酋迪拜，主要从事卷烟等烟草类产品营销业务。",
-      "phone": ""
+      "phone": "+971 43991810"
     },
     "zyyb":{
       "title": "中烟英美国际有限公司",
       "content": "中烟英美国际有限公司位于中国香港，是中国烟草与英美烟草公司共同投资的国际烟草合资公司，主要从事卷烟等烟草类产品营销业务。",
-      "phone": ""
+      "phone": "+852 31295331"
     },
     "zyfm":{
       "title": "中烟菲莫国际有限公司",
       "content": "中烟菲莫国际有限公司位于瑞士洛桑，是中国烟草与菲利普莫里斯国际公司共同投资的国际烟草合资公司，主要从事卷烟等烟草类产品营销业务。",
-      "phone": ""
+      "phone": "+41 215254620"
     },
     "zyhk":{
       "title": "中烟国际（香港）制造有限公司",

src/components/common/header/Header.vue

@@ -6,7 +6,8 @@ import { h } from 'vue';
 import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router';
 import LanguageSwitcher from '../../../views/components/LanguageSwitcher.vue';
-// import LanguageSwitcher from '../../../views/components/LanguageSwitcher.vue';
+// import myNavigation from "../../../views/components/myNavigation.vue";
+
 const router = useRouter()
 const CompanyInfo = ref({})//后台数据获取
 const CompanyInfo1 = ref(JSON.parse(window.sessionStorage.getItem('companyinfo')) ? JSON.parse(window.sessionStorage.getItem('companyinfo')) : '0')//从会话储存获取
@@ -117,6 +118,7 @@ onBeforeUnmount(() => {
 			</div>
 
 			<LanguageSwitcher class="lang-switcher" />
+			<!-- <myNavigation></myNavigation> -->
 		</div>
 
 		<!-- 桌面端导航 -->

src/views/JoinDetail.vue

@@ -1,26 +1,29 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
-const title = ref('信息技术管理岗 专员及以上');
+const title = ref('员工关系岗 专员及以上');
 const list = ref([
     {
         title: '岗位职责:',
         content: [
-            '1.负责机房、网络、服务器、数据库、信息系统等信息化运维和数据备份工作。',
-            '2.负责网络信息安全防护、网络安全应急演练和应急处置、网站运营和安全防护、音视频会议系统保障等工作。',
-            '3.负责信息化项目预算、采购、建设、验收等管理工作。',
-            '4.完成其他临时交办的工作。'
+            '1.协助建立、运行、维护、改进国际集团人力资源子管理体系；',
+            '2.参与编制岗级体系；',
+            '3.协助开展人员招聘，办理员工试用、入职、转正、调动、离职等手续；',
+            '4.协助建立和维护人员信息档案，管理雇佣合同；',
+            '5.受理劳动争议和员工投诉，协助处理劳动纠纷；',
+            '6.分析研究下属企业用工合规性，提出风险防控措施；',
+            '7.建立维护国际业务知识库、内部培训师资库；',
+            '8.负责组织实施培训和日常管理。'
         ]
     },
     {
         title: '岗位要求:',
         content: [
-            '1.计算机、软件工程、网络通信、信息安全、数字化转型、大数据管理等相关专业本科学历，硕士及以上学历优先。',
-            '2.具有信息技术相关工作或实习经验，具备网络、服务器、数据库、信息系统等网络安全和运维管理工作经验者优先。',
-            '3.熟悉网络通信、信息安全相关技术，具有较好的主流网络通信设备、信息安全产品的配置操作和日常维护能力。',
-            '4.熟悉服务器、操作系统、数据库相关技术，具有较好的主流服务器、操作系统、数据库的配置操作和日常维护能力。',
-            '5.中英文书写及口语表达流畅，具有较强的文字表达和公文写作能力，熟悉香港及国外信息化领域情况者优先。',
-            '6.具有主流的网络设备、信息安全产品、服务器、数据库等厂商的技术资格认证者优先。',
+            '1.大学本科及以上学历；人力资源管理、行政管理等管理类专业背景；',
+            '2.具有3年以上香港地区企业人力资源相关工作经验；',
+            '3.熟悉香港雇佣条例，了解香港劳动用工相关政策；',
+            '4.具有较强的沟通能力、逻辑分析能力、较好的英语听说读写水平；',
+            '5.熟练掌握office办公软件，具有管理体系文件编制经验优先。'
         ]
     }
 ])
@@ -38,7 +41,7 @@ const goBack = () => {
         <div class="back" @click="goBack"> 
            <img src="../assets/images/back.png" alt="">
         </div>
-        <div class="joinDetailTitle">中烟国际集团有限公司集团信息技术管理岗招聘</div>
+        <div class="joinDetailTitle">【社会招聘】中烟国际集团有限公司集团员工关系岗招聘</div>
         <div class="date">
             <div>社会招聘</div>
             <div>2025-06-07 08:30:00</div>

src/views/JoinUs.vue

@@ -3,7 +3,7 @@ import Layout from '@/components/common/Layout.vue';
 import JoinDetail from './JoinDetail.vue';
 import { onMounted, ref } from 'vue';
 const list = ref([
-    { number: 1, title: '【社会招聘】中烟国际集团有限公司集团信息技术管理岗招聘', date: '2025-06-07' },
+    { number: 1, title: '【社会招聘】中烟国际集团有限公司集团员工关系岗招聘', date: '2025-06-07' },
     { number: 2 },
     { number: 3 },
     { number: 4 },

src/views/components/LanguageSwitcher.vue

@@ -13,6 +13,7 @@
         <span class="triangle" v-if="currentLang === 'en'">▶</span>
         <span class="text">English</span>
       </div>
+      <myNavigation></myNavigation>
     </div>
     <div class="changeL" ref="changeL">
       <el-dropdown 
@@ -38,6 +39,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { ref, onMounted, onBeforeUnmount } from 'vue';
+import myNavigation from "./myNavigation.vue";
 const { locale } = useI18n();
 
 // 当前选中的语言
@@ -70,8 +72,6 @@ const screenWidth = ref(window.innerWidth);  // 初始化屏幕宽度
 // 响应式处理函数
 const handleResize = () => {
   screenWidth.value = window.innerWidth;
-  console.log('当前屏幕宽度:', screenWidth.value);
-  console.log('changeL元素:', changeL.value);
 
   // 当页面宽度小于768时，隐藏类名是changeItem的div
   if (screenWidth.value < 768) {
@@ -167,6 +167,7 @@ onBeforeUnmount(() => {
   cursor: pointer;
   color:#999;
   font-size:1.2rem;
+  line-height: 2.8rem;
 }
 
 .changeItem.active {

src/views/components/myNavigation.vue

@@ -0,0 +1,299 @@
+<script setup>
+import { ref, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
+
+const showNav = ref(false);
+const router = useRouter();
+const navBtnRef = ref(null);
+const navPopupRef = ref(null);
+
+// 分组导航项
+const consumerNav = [
+  { label: '集团概况', path: '/solution' },
+  { label: '联系方式', path: '/ContactInformation' },
+];
+const partnerNav = [
+  { label: '主营业务', path: '/MainBusiness' },
+  { label: '人才招聘', path: '/JoinUs' },
+];
+
+const toggleNav = () => {
+  showNav.value = !showNav.value;
+  if (showNav.value) {
+    nextTick(() => {
+      document.addEventListener('click', handleClickOutside);
+    });
+  } else {
+    document.removeEventListener('click', handleClickOutside);
+  }
+};
+
+const handleNav = (path) => {
+  router.push(path);
+  showNav.value = false;
+  document.removeEventListener('click', handleClickOutside);
+};
+// 导航到指定页面
+const navigateTo = (path) => {
+  router.push(path);
+};
+
+const handleClickOutside = (e) => {
+  if (
+    navBtnRef.value && navBtnRef.value.contains(e.target)
+    || (navPopupRef.value && navPopupRef.value.contains(e.target))
+  ) {
+    return;
+  }
+  showNav.value = false;
+  document.removeEventListener('click', handleClickOutside);
+};
+</script>
+
+<template>
+  <div class="quick-nav-btn" ref="navBtnRef">
+    <div class="quickBtn" size="" @click="toggleNav">
+      <div class="guide-btn" @click="showGuide">
+          使用指南
+        </div>
+    </div>
+    <transition name="fade">
+      <div v-if="showNav" class="quick-nav-popup" ref="navPopupRef">
+         <div class="guide-body">
+            <div class="guide-section">
+              <h4>消费者</h4>
+              <div class="guide-links">
+                <div class="guide-link" @click="navigateTo('/solution')">集团概况</div>
+                <div class="guide-link" @click="navigateTo('/ContactInformation')">联系方式</div>
+              </div>
+            </div>
+            <div class="guide-section">
+              <h4>合作者</h4>
+              <div class="guide-links">
+                <div class="guide-link" @click="navigateTo('/MainBusiness')">主营业务</div>
+                <div class="guide-link" @click="navigateTo('/JoinUs')">人才招聘</div>
+              </div>
+            </div>
+          </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.quick-nav-btn {
+  position: relative;
+  display: inline-block;
+  z-index: 2000;
+  cursor: pointer;
+}
+
+.quick-nav-popup {
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  transform: translateX(-50%);
+  min-width: 22rem;
+  background: #fff;
+  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.12);
+  border-radius: 0.6rem;
+  padding: 1.5rem 0 1rem 0;
+  display: flex;
+  flex-direction: column;
+  /* animation: popupIn 0.18s; */
+  margin-top: 0.7rem;
+}
+
+@keyframes popupIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.quick-nav-group {
+  padding: 0 2rem 0 2rem;
+  margin-bottom: 1.5rem;
+}
+
+.quick-nav-group-title {
+  font-weight: bold;
+  font-size: 1.08rem;
+  color: #F7B334;
+  margin: 1.5rem 0 0.7rem 0;
+  letter-spacing: 1px;
+}
+
+.quick-nav-items-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 1.8rem;
+  margin-bottom: 0.4rem;
+}
+
+.quick-nav-item {
+  font-size: 1.02rem;
+  color: #888;
+  cursor: pointer;
+  padding: 0.3rem 0;
+  transition: color 0.2s, background 0.2s;
+  white-space: nowrap;
+}
+
+.quick-nav-item:hover {
+  color: #F7B334;
+  border-radius: 4px;
+}
+
+.quick-nav-group:not(:last-child) {
+  border-bottom: 1px solid #ececec;
+  padding-bottom: 0.7rem;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.18s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.quickBtn {
+  /* display: flex;
+  font-size: 1rem;
+  color: #777777;
+  border: 1px solid #F7B334;
+  padding: 0.2rem 0.7rem;
+  border-radius: 0.4rem;
+  line-height: 2rem;
+  >img{
+    width: 2rem;
+    height: 2rem;
+  } */
+}
+/* 使用指南按钮样式 */
+.guide-btn {
+  cursor: pointer;
+  color: white;
+  font-size: 1.1rem;
+  font-weight: 500;
+  padding: 0.5rem 1.6rem;
+  background: linear-gradient(135deg, #F7B334 0%, #E6A429 100%);
+  border: none;
+  border-radius: 25px;
+  box-shadow: 0 3px 12px rgba(247, 179, 52, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  letter-spacing: 0.5px;
+}
+
+.guide-btn::before {
+  content: '📖';
+  font-size: 1rem;
+}
+
+.guide-btn:hover {
+  background: linear-gradient(135deg, #E6A429 0%, #D4941F 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 0.5rem 1.6rem rgba(247, 179, 52, 0.4);
+}
+
+.guide-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 0.15rem 0.5rem rgba(247, 179, 52, 0.3);
+}
+.guide-body {
+  padding: 1.5rem;
+  background: linear-gradient(135deg, #fefefe 0%, #f8f9fa 100%);
+}
+
+.guide-section {
+  margin-bottom: 1.5rem;
+}
+
+.guide-section:last-child {
+  margin-bottom: 0;
+}
+
+.guide-section h4 {
+  margin: 0 0 1rem 0;
+  font-size: 1.2rem;
+  color: #2c3e50;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 0.1rem solid #F7B334;
+}
+
+.guide-section:first-child h4::before {
+  content: '👤';
+  font-size: 1.1rem;
+}
+
+.guide-section:last-child h4::before {
+  content: '🤝';
+  font-size: 1.1rem;
+}
+
+.guide-links {
+  display: flex;
+  gap: 0.9rem;
+  flex-wrap: wrap;
+}
+
+.guide-link {
+  cursor: pointer;
+  color: #495057;
+  font-size: 0.95rem;
+  font-weight: 500;
+  padding: 0.8rem 1.1rem;
+  border: 2px solid #e9ecef;
+  border-radius: 1rem;
+  background: white;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+}
+
+.guide-link::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(247, 179, 52, 0.1), transparent);
+  transition: left 0.5s;
+}
+
+.guide-link:hover {
+  background: linear-gradient(135deg, #F7B334 0%, #E6A429 100%);
+  color: white;
+  border-color: #F7B334;
+  transform: translateY(-2px);
+  box-shadow: 0 0.3rem 0.8rem rgba(247, 179, 52, 0.3);
+}
+
+.guide-link:hover::before {
+  left: 100%;
+}
+
+.guide-link:active {
+  transform: translateY(0);
+}
+
+</style>

src/views/newsDetail.vue

@@ -13,6 +13,14 @@ const goBack = () => {
     }
 };
 const id = ref('');
+
+// 字体大小切换
+const fontSizeLevel = ref(0); // 0-小 1-中 2-大
+const fontSizeMap = ['1.2rem', '1.56rem', '2.04rem'];
+const lineHeightMap = ['2.1rem', '2.7rem', '3.5rem'];
+const setFontSize = (level) => {
+    fontSizeLevel.value = level;
+};
 onMounted(() => {
     // 从路由参数获取公司ID
     console.log('当前路由参数:', route.params);
@@ -24,38 +32,77 @@ onMounted(() => {
     <div>
         <Layout>
             <div class="detailBox">
+                <div class="back">
+                    <img src="../assets/images/back.png" alt="" @click="goBack">
+                    <div class="font-size-control">
+                        <span class="font-size-label">字体大小：</span>
+                        <div class="font-size-switch">
+                            <button class="font-a-btn" :class="{ active: fontSizeLevel === 0 }"
+                                @click="setFontSize(0)">A</button>
+                            <button class="font-a-btn font-a-middle" :class="{ active: fontSizeLevel === 1 }"
+                                @click="setFontSize(1)">A</button>
+                            <button class="font-a-btn font-a-large" :class="{ active: fontSizeLevel === 2 }"
+                                @click="setFontSize(2)">A</button>
+                        </div>
+                    </div>
+                </div>
                 <div class="detailContainer">
-                    <div class="back" @click="goBack">
-                        <img src="../assets/images/back.png" alt="">
+                    <div class="detailTitle">
+                        <slot name="title">
+                            <span>
+                                <template v-if="id == 1">
+                                    国际集团组织员工参观沙头角禁区及香港回归
+                                    <br />纪念塔活动
+                                </template>
+                                <template v-else-if="id == 2">
+                                    国际集团召开2025年一季度经济运行分析会
+                                </template>
+                                <template v-else-if="id == 3">
+                                    国际集团参加香港中企协保龄球邀请赛
+                                </template>
+                                <template v-else-if="id == 4">
+                                    国际集团举办《哪吒2》主题观影活动
+                                </template>
+                                <template v-else-if="id == 5">
+                                    凝心聚力迎新春 砥砺奋进启新程<br />——国际集团举行2025年春茗暨开工仪式
+                                </template>
+                                <template v-else-if="id == 6">
+                                    国际集团开展"春节送温暖"义工活动
+                                </template>
+                                <template v-else-if="id == 7">
+                                    中烟国际集团有限公司召开<br />2025年度工作会议<br />传达学习2025年全国烟草工作会议精神
+                                </template>
+                            </span>
+                        </slot>
+                    </div>
+                    <div class="detailDate">
+                        <template v-if="id == 1">2025-06-27</template>
+                        <template v-else-if="id == 2">2025-04-15</template>
+                        <template v-else-if="id == 3">2025-03-29</template>
+                        <template v-else-if="id == 4">2025-02-16</template>
+                        <template v-else-if="id == 5">2025-02-13</template>
+                        <template v-else-if="id == 6">2025-01-21</template>
+                        <template v-else-if="id == 7">2025-01-20</template>
                     </div>
                     <div v-if="id == 1">
-                        <div class="detailTitle">
-                            <div>
-                                国际集团组织员工参观沙头角禁区及香港回归
-                            </div>
-                            <div>
-                                纪念塔活动
-                            </div>
-                        </div>
-                        <div class="detailDate">2025-06-27</div>
                         <div class="newspic">
                             <img src="../assets/images/newsPic/jnt.png" alt="">
                         </div>
-                        <div class="detailContent">
+                        <div class="detailContent"
+                            :style="{ fontSize: fontSizeMap[fontSizeLevel], lineHeight: lineHeightMap[fontSizeLevel] }">
                             <div>
-                                2025年6月27日，为庆祝香港回归祖国暨香港特别行政区成立二十八周年，国际集团组织全体员工赴新界沙头角禁区开展专题参观学习。队伍依次参观“沙头角之角”石碑，远眺中英街界碑及“一街两制”警戒线，随后考察沙头角口岸旅检大楼旧址，系统了解边境管理沿革与深港合作历程；其后登上高32.4米的香港回归纪念塔，重温1997年回归盛典，深刻领会“一国两制”伟大实践的历史意义和时代价值。此次活动显著增强了员工的爱国爱港情怀。大家一致表示，将立足本职，以实干担当为香港长治久安与国际集团高质量发展贡献力量。
+                                2025年6月27日，为庆祝香港回归祖国暨香港特别行政区成立二十八周年，国际集团组织全体员工赴新界沙头角禁区开展专题参观学习。队伍依次参观"沙头角之角"石碑，远眺中英街界碑及"一街两制"警戒线，随后考察沙头角口岸旅检大楼旧址，系统了解边境管理沿革与深港合作历程；其后登上高32.4米的香港回归纪念塔，重温1997年回归盛典，深刻领会"一国两制"伟大实践的历史意义和时代价值。此次活动显著增强了员工的爱国爱港情怀。大家一致表示，将立足本职，以实干担当为香港长治久安与国际集团高质量发展贡献力量。
                             </div>
                         </div>
                     </div>
                     <div v-if="id == 2">
-                        <div class="detailTitle">国际集团召开2025年一季度经济运行分析会</div>
-                        <div class="detailDate">2025-04-15</div>
-                        <div class="detailContent">
+                        <div class="detailContent"
+                            :style="{ fontSize: fontSizeMap[fontSizeLevel], lineHeight: lineHeightMap[fontSizeLevel] }">
                             <div>
                                 4月15日，中烟国际集团有限公司召开一季度经济运行分析会，传达国家局、总公司经济运行分析会精神，分析研究国际集团一季度经济运行情况，安排部署下一步重点工作。
                             </div>
                             <div>
-                                国际集团党组书记、总经理邵岩同志指出，一季度国际集团经济运行总体平稳，但也要清醒认识当前存在的问题和面临的严峻形势，各单位要全力以赴抓好二季度以及2025年的各项工作，“提档位、出真招、见实效”，聚焦关键目标，狠抓重点任务，确保圆满完成全年主要经济目标和重点工作任务。
+                                国际集团党组书记、总经理邵岩同志指出，一季度国际集团经济运行总体平稳，但也要清醒认识当前存在的问题和面临的严峻形势，各单位要全力以赴抓好二季度以及2025年的各项工作，"提档位、出真招、见实效"，聚焦关键目标，狠抓重点任务，确保圆满完成全年主要经济目标和重点工作任务。
                             </div>
                             <div>
                                 国际集团内设机构各部室、各所属企业主要负责人，中国烟草国际有限公司有关部室负责人参加会议。
@@ -63,31 +110,29 @@ onMounted(() => {
                         </div>
                     </div>
                     <div v-if="id == 3">
-                        <div class="detailTitle">国际集团参加香港中企协保龄球邀请赛</div>
-                        <div class="detailDate">2025-03-29</div>
                         <div class="newspic">
                             <img src="../assets/images/newsPic/ball1.png" alt="">
                             <img src="../assets/images/newsPic/ball2.png" alt="">
                         </div>
-                        <div class="detailContent">
+                        <div class="detailContent"
+                            :style="{ fontSize: fontSizeMap[fontSizeLevel], lineHeight: lineHeightMap[fontSizeLevel] }">
                             <div>
-                                为进一步加强与驻港中资企业交流，丰富员工文体生活，国际集团积极响应香港中企协的号召，组队参与3月29日在香港启德体育园举办的“‘龄’动精彩，球艺飞扬”中企保龄球邀请赛。国际集团代表队队员们全程投入，奋力拼搏，经过近半天的激烈比赛，最终在79支参赛队伍中取得第34名的佳绩，充分展现了国际集团员工团结奋斗、积极向上的精神面貌。
+                                为进一步加强与驻港中资企业交流，丰富员工文体生活，国际集团积极响应香港中企协的号召，组队参与3月29日在香港启德体育园举办的"'龄'动精彩，球艺飞扬"中企保龄球邀请赛。国际集团代表队队员们全程投入，奋力拼搏，经过近半天的激烈比赛，最终在79支参赛队伍中取得第34名的佳绩，充分展现了国际集团员工团结奋斗、积极向上的精神面貌。
                             </div>
                         </div>
                     </div>
                     <div v-if="id == 4">
-                        <div class="detailTitle">国际集团举办《哪吒2》主题观影活动</div>
-                        <div class="detailDate">2025-02-16</div>
                         <div class="detailImg">
                             <img src="../assets/images/newsPic/ez.png" alt="">
                             <img src="../assets/images/newsPic/ez1.png" alt="">
                         </div>
-                        <div class="detailContent">
+                        <div class="detailContent"
+                            :style="{ fontSize: fontSizeMap[fontSizeLevel], lineHeight: lineHeightMap[fontSizeLevel] }">
                             <div>
-                                2025年2月26日，国际集团组织员工及家属集体观看国产动画《哪吒2》。影片以传统神话为根基，通过前沿数字技术与东方美学叙事的深度融合，以哪吒“逆天改命”的成长史诗，生动诠释了中华文明“自强不息”的精神内核。
+                                2025年2月26日，国际集团组织员工及家属集体观看国产动画《哪吒2》。影片以传统神话为根基，通过前沿数字技术与东方美学叙事的深度融合，以哪吒"逆天改命"的成长史诗，生动诠释了中华文明"自强不息"的精神内核。
                             </div>
                             <div>
-                                多名员工表示，这场视听盛宴不仅让传统文化“活起来”，更让文化自信“强起来”——既为中华文明“守正创新”的基因所震撼，也为身为文化传承者深感自豪。
+                                多名员工表示，这场视听盛宴不仅让传统文化"活起来"，更让文化自信"强起来"——既为中华文明"守正创新"的基因所震撼，也为身为文化传承者深感自豪。
                             </div>
                             <div>
                                 此次活动是国际集团深化企业文化建设的重要实践。通过将传统文化精髓与企业精神相融合，让员工在文化浸润中形成共鸣与价值共识，并转化为推动企业发展的精神动能，为企业高质量发展注入可持续动能。
@@ -95,50 +140,53 @@ onMounted(() => {
                         </div>
                     </div>
                     <div v-if="id == 5">
-                        <div class="detailTitle">
-                            <div>
-                                凝心聚力迎新春 砥砺奋进启新程
-                            </div>
-                            <div>——国际集团举行2025年春茗暨开工仪式</div>
-                        </div>
-                        <div class="detailDate">2025-02-13</div>
                         <div class="newspic">
                             <img src="../assets/images/newsPic/kaigong.png" alt="">
                         </div>
-                        <div class="detailContent">
+                        <div class="detailContent"
+                            :style="{ fontSize: fontSizeMap[fontSizeLevel], lineHeight: lineHeightMap[fontSizeLevel] }">
                             <div>
                                 新岁伊始，万象更新。根据上级有关文件精神指引，为传承中华传统文化，凝聚团队力量，国际集团于2月13日举行春茗暨开工仪式。
                             </div>
                             <div>
-                                春茗作为香港及粤港澳地区的重要节庆活动，不仅寓意“纳福迎新，展望新年”，亦是企业凝聚共识、统筹布局的重要契机。2025年恰逢“十四五”规划收官之年，亦是总部外移香港的第四年。为承续本地传统，国际集团特别举行切烧猪仪式，寓意“开年见喜，行稳致远”，共启新程。
+                                春茗作为香港及粤港澳地区的重要节庆活动，不仅寓意"纳福迎新，展望新年"，亦是企业凝聚共识、统筹布局的重要契机。2025年恰逢"十四五"规划收官之年，亦是总部外移香港的第四年。为承续本地传统，国际集团特别举行切烧猪仪式，寓意"开年见喜，行稳致远"，共启新程。
                             </div>
                             <div>
-                                公司董事长、总经理邵岩在致辞中肯定了全体员工的辛勤付出，并强调“十四五”规划收官之年是公司发展的关键阶段，全员应凝心聚力，攻坚克难，全力冲刺年度目标。此次春茗暨开工仪式既承载新春祝福，也吹响奋进新征程的号角。公司将坚定信心，抢抓机遇，推动高质量发展迈上新台阶，确保“十四五”圆满收官。
+                                公司董事长、总经理邵岩在致辞中肯定了全体员工的辛勤付出，并强调"十四五"规划收官之年是公司发展的关键阶段，全员应凝心聚力，攻坚克难，全力冲刺年度目标。此次春茗暨开工仪式既承载新春祝福，也吹响奋进新征程的号角。公司将坚定信心，抢抓机遇，推动高质量发展迈上新台阶，确保"十四五"圆满收官。
                             </div>
                         </div>
                     </div>
-                    <div v-if="id == 7">
-                        <div class="detailTitle">
-                            <div>
-                                中烟国际集团有限公司召开
-                            </div>
+                    <div v-if="id == 6">
+                        <div class="newspic">
+                            <img src="../assets/images/newsPic/yigong.png" alt="">
+                        </div>
+                        <div class="detailContent"
+                            :style="{ fontSize: fontSizeMap[fontSizeLevel], lineHeight: lineHeightMap[fontSizeLevel] }">
                             <div>
-                                2025年度工作会议
+                                1月21日，国际集团在香港中国企业协会的大力支持下，与荃湾各界协会、荃湾义工团和中国太平义工队联合开展"中企关爱进社区 春节送温暖"义工活动。
                             </div>
+                        </div>
+                        <div class="newspic1">
+                            <img src="../assets/images/newsPic/yigong1.png" alt="">
+                        </div>
+                        <div class="detailContent"
+                            :style="{ fontSize: fontSizeMap[fontSizeLevel], lineHeight: lineHeightMap[fontSizeLevel] }">
                             <div>
-                                传达学习2025年全国烟草工作会议精神
+                                国际集团董事长、总经理邵岩及其他领导班子成员，荃湾区议员陈晓津、华美玲，香港中国企业协会本地事务部总监许伟等嘉宾出席活动，国际集团、荃湾各界协会、荃湾义工团、中国太平义工队代表近50人参加活动，向荃湾地区困难基层家庭入户派送冷暖风扇和空气净化一体机和送上春节的美好祝愿，以实际行动履行中资企业的社会责任，传递国际集团对香港基层市民的亲切关怀。
                             </div>
                         </div>
-                        <div class="detailDate">2025-01-20</div>
+                    </div>
+                    <div v-if="id == 7">
                         <div class="newspic">
                             <img src="../assets/images/newsPic/jingshen.png" alt="">
                         </div>
-                        <div class="detailContent">
+                        <div class="detailContent"
+                            :style="{ fontSize: fontSizeMap[fontSizeLevel], lineHeight: lineHeightMap[fontSizeLevel] }">
                             <div>
                                 1月20日，中烟国际集团有限公司在香港召开2025年度工作会议，认真学习贯彻2025年全国烟草工作会议精神，总结2024年工作，分析当前国际形势和内部调整，部署2025年工作任务。中烟国际集团有限公司党组书记、董事长、总经理邵岩作工作报告。
                             </div>
                             <div>
-                                会议认为，2025年全国烟草工作会议是行业在“十四五”规划收官、“十五五”谋篇布局关键节点召开的重要会议。张建民局长代表党组作的工作报告高屋建瓴、思想深邃，为做好全年工作、推动行业高质量发展和现代化建设提供了遵循。
+                                会议认为，2025年全国烟草工作会议是行业在"十四五"规划收官、"十五五"谋篇布局关键节点召开的重要会议。张建民局长代表党组作的工作报告高屋建瓴、思想深邃，为做好全年工作、推动行业高质量发展和现代化建设提供了遵循。
                             </div>
                             <div>
                                 会议要求，国际集团要深入学习贯彻落实2025年全国烟草工作会议精神，切实把思想和行动统一到国家局党组决策部署上来。各所属企业负责人要将会议精神传导到本企业外派员工。
@@ -157,36 +205,16 @@ onMounted(() => {
                             </div>
                         </div>
                     </div>
-                    <div v-if="id == 6">
-                        <div class="detailTitle">国际集团开展“春节送温暖”义工活动</div>
-                        <div class="detailDate">2025-01-21</div>
-                        <div class="newspic">
-                            <img src="../assets/images/newsPic/yigong.png" alt="">
-                        </div>
-                        <div class="detailContent">
-                            <div>
-                                1月21日，国际集团在香港中国企业协会的大力支持下，与荃湾各界协会、荃湾义工团和中国太平义工队联合开展“中企关爱进社区 春节送温暖”义工活动。
-                            </div>
-                        </div>
-                        <div class="newspic1">
-                            <img src="../assets/images/newsPic/yigong1.png" alt="">
-                        </div>
-                        <div class="detailContent">
-                            <div>
-                                国际集团董事长、总经理邵岩及其他领导班子成员，荃湾区议员陈晓津、华美玲，香港中国企业协会本地事务部总监许伟等嘉宾出席活动，国际集团、荃湾各界协会、荃湾义工团、中国太平义工队代表近50人参加活动，向荃湾地区困难基层家庭入户派送冷暖风扇和空气净化一体机和送上春节的美好祝愿，以实际行动履行中资企业的社会责任，传递国际集团对香港基层市民的亲切关怀。
-                            </div>
-                        </div>
-                    </div>
-
                 </div>
             </div>
         </Layout>
     </div>
 </template>
+
 <style scoped>
 .detailBox {
     width: 100%;
-    border-top: 2px solid #E5E5E5;
+    /* border-top: 2px solid #E5E5E5; */
     margin-top: 10rem;
 }
 
@@ -196,9 +224,66 @@ onMounted(() => {
     font-weight: 550;
     margin-top: 2rem;
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1.2rem;
+}
+
+.font-size-control {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+}
+
+.font-size-label {
+    font-size: 1rem;
+    color: #333;
+    white-space: nowrap;
+}
+
+.font-size-switch {
+    display: flex;
+    gap: 0.3rem;
+}
+
+.font-a-btn {
+    width: 2.2rem;
+    height: 2.2rem;
+    border: 1px solid #ddd;
+    background: white;
+    color: #333;
+    font-weight: bold;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    border-radius: 2px;
+    font-size: 1rem;
+}
+
+.font-a-btn.font-a-middle {
+    font-size: 1.1rem;
+}
+
+.font-a-btn.font-a-large {
+    font-size: 1.25rem;
+}
+
+.font-a-btn.active {
+    background: #409eff;
+    border-color: #409eff;
+    color: white;
+}
+
+.font-a-btn:hover:not(.active) {
+    border-color: #409eff;
+    color: #409eff;
 }
 
 .detailDate {
+    position: relative;
     font-size: 1.2rem;
     color: #888;
     text-align: center;
@@ -210,6 +295,7 @@ onMounted(() => {
 .detailContainer {
     width: 65%;
     margin: 0 auto;
+    margin-top: 7rem;
 }
 
 .detailImg {
@@ -257,7 +343,7 @@ onMounted(() => {
 }
 
 .detailContent {
-    font-size: 1.2rem;
+    /* 字体大小由内联style控制 */
     line-height: 2.1rem;
     color: #333;
     margin-top: 2rem;
@@ -268,23 +354,26 @@ onMounted(() => {
 }
 
 .back {
-    position: absolute;
-    left: 17.5%;
-    top: 12rem;
+    position: fixed;
+    left: 16.5%;
+    top: 9.9rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     cursor: pointer;
+    /* margin: 1rem auto 1rem; */
     font-size: 1.5rem;
-    width: 2rem;
+    width: 65%;
     height: 2rem;
+    z-index: 9999;
+    padding: 1rem 2rem;
+    background-color: #f8f9fa;
+    border-radius: 4px;
 
     >img {
-        width: 100%;
-        height: 100%;
-    }
-
-    @media screen and (max-width: 767px) {
-        left: 14%;
-        top: 12.5rem;
-
+        width: 2rem;
+        height: 2rem;
+        cursor: pointer;
     }
 }
 </style>

tobacco/index.html

@@ -11,8 +11,8 @@
     <!-- webconfig.js 已移除，API地址直接配置在 http.js 中 -->
     <title>中烟国际集团</title>
     <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
-    <script type="module" crossorigin src="./assets/js/index.d3527333.js"></script>
-    <link rel="stylesheet" href="./assets/css/index.74939d0c.css">
+    <script type="module" crossorigin src="./assets/js/index.d43b88bb.js"></script>
+    <link rel="stylesheet" href="./assets/css/index.90c2dd2d.css">
   </head>
   <body>
     <div id="app"></div>