~~ 移动端修改适配~~

i18n/locales/zh-CN.json

@@ -51,6 +51,7 @@
     "tishi": "吸烟有害健康，本网站含有烟草相关内容，谢绝未成年人访问!",
     "gengduoxinwen": "更多新闻",
     "zygjjt": "中烟国际集团有限公司",
+    "zygjjt1":"中国烟草国际有限公司",
     "zygjjtContent": "中烟国际集团有限公司位于中国香港，是国家烟草专卖局、中国烟草总公司在境外的实体化公司，承担 “海外总部”的管理职能。其内设机构主要包括公共事务部、战略发展部、市场营销部、供应链部、生产运营部、财务部、人力资源部、信息数字化部、合规风控部、监察部等10个部门。",
     "zygjjtContent1": "集团所属企业主要包括中烟国际（香港）有限公司、天泽烟草有限责任公司、中烟国际巴西有限公司、中烟国际（北美）股份有限公司、中烟国际阿根廷有限公司、中烟国际（中东）有限公司、中烟英美国际有限公司、中烟菲莫国际有限公司、中烟国际（香港）制造有限公司、中烟国际（澳门）制造有限公司、中烟国际（老挝）制造有限公司、中烟国际（柬埔寨）制造有限公司、中烟国际（罗马尼亚）制造有限公司、中烟国际（瑞士）有限公司、中烟国际（欧洲）有限公司等15家企业。",
     "zygjjtContent2": "中国烟草国际有限公司位于中国北京，承担中烟国际集团有限公司的北京分部职能。其内设机构包括综合事务部、国营贸易部、财务管理部等3个部门。",

src/assets/css/common.min.css

@@ -149,6 +149,10 @@
         width: 100%;
         height: 100%;
     }
+     @media screen and (max-width: 767px) {
+        height: 20rem!important;
+    }
+
 }
 
 

src/components/common/footer/FooterNew.vue

@@ -32,11 +32,24 @@
         margin-right: 5.3rem;
         margin-top: 2px;
     }
+
+    @media screen and (max-width: 767px) {
+        >div:nth-child(1) {
+            display: none;
+            height: 2rem;
+            border-left: 0.4rem solid #F7B334;
+            margin-right: 1.3rem;
+            margin-top: 2px;
+        }
+
+        >div:nth-child(2) {
+            width: 90%;
+        }
+    }
 }
 
 .footerContainer {
     width: 100%;
-    height: 2rem;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -67,10 +80,50 @@
             margin: 0px 1rem;
         }
     }
+
+    @media screen and (max-width: 767px) {
+        display: block;
+        align-items: left;
+        justify-content: left;
+
+        >div:nth-child(even) {
+            display: none;
+        }
+
+        /* 每行前面都加一个小竖线 */
+        >div:nth-child(odd)::before {
+            content: '';
+            display: inline-block;
+            width: 0.2rem;
+            height: 1.2rem;
+            background-color: #F7B334;
+            margin-right: 1rem;
+            vertical-align: middle;
+        }
+
+        >div {
+            margin-top: 1rem;
+        }
+
+    }
 }
 
 .footerFooter {
-    text-align: center;
+    width: 90%;
     font-size: 0.9rem;
+    margin-top: 1rem;
+}
+
+.footerFooter::before {
+    @media screen and (max-width: 767px) {
+        content: '';
+        display: inline-block;
+        width: 0.2rem;
+        height: 1.2rem;
+        background-color: #F7B334;
+        margin-right: 1rem;
+        vertical-align: middle;
+
+    }
 }
 </style>

src/components/common/header/Header.vue

@@ -14,6 +14,14 @@ const CompanyInfo1 = ref(JSON.parse(window.sessionStorage.getItem('companyinfo')
 // 移动端菜单状态
 const isMobileMenuOpen = ref(false)
 
+// 移动端判断
+const isMobile = ref(false)
+
+// 检查是否为移动端
+const checkMobile = () => {
+	isMobile.value = window.innerWidth <= 768
+}
+
 const getCompanyInfo = async () => {
 	const { data: res } = await getCompanyInfoAPI()
 	CompanyInfo.value = res.Data
@@ -21,6 +29,9 @@ const getCompanyInfo = async () => {
 	console.log('获取成功');
 
 }
+
+
+
 const toggleStickyHeader = () => {
 	const scrolled = document.documentElement.scrollTop;
 	if (scrolled > 100) {
@@ -42,23 +53,57 @@ const callPhone = () => {
 
 // 切换移动端菜单
 const toggleMobileMenu = () => {
-	isMobileMenuOpen.value = !isMobileMenuOpen.value
+	if (isMobile.value) {
+		isMobileMenuOpen.value = !isMobileMenuOpen.value
+	}
 }
 
 // 关闭移动端菜单
 const closeMobileMenu = () => {
 	isMobileMenuOpen.value = false
 }
+// 移动端菜单方向
+const direction = ref('ttb');
+const drawer = ref(false);
+const showMenu = () => {
+	drawer.value = true;
+}
+
+// 处理drawer关闭
+const handleClose = (done) => {
+	drawer.value = false;
+	done();
+}
 
+onMounted(() => {
+	// 初始化检查移动端
+	checkMobile()
+	// 监听窗口大小变化
+	window.addEventListener('resize', checkMobile)
+})
 
 onBeforeUnmount(() => {
 	// window.removeEventdivstener('scroll', toggleStickyHeader);
+	// 移除监听器
+	window.removeEventListener('resize', checkMobile)
 })
 </script>
 <template>
 	<div class="header-wrapper">
+		<div v-if="isMobile" class="header-mobile">
+			<img src="../../../assets/images/menu.png" alt="" srcset="" @click="showMenu">
+			<div class="header-mobile-title">
+				<img src="../../../assets/images/inlogo.png" alt="">
+				<div>
+					<div class="mainTitle">中烟国际集团有限公司</div>
+					<div class="assistantTitle"> China Tobacco International Group Limited</div>
+				</div>
+
+			</div>
+			<LanguageSwitcher class="lang-switcher" />
+		</div>
 
-		<div class="nav-wrapper header-default headerNew ">
+		<div v-else class="nav-wrapper header-default headerNew ">
 			<div class="zgyc">
 				<!-- <img src="../../../assets/images/newIndex/titleNew.png" alt="" srcset=""> -->
 				<!-- #0F409E -->
@@ -70,17 +115,10 @@ onBeforeUnmount(() => {
 			</div>
 
 			<LanguageSwitcher class="lang-switcher" />
-
-			<!-- 移动端汉堡菜单按钮 -->
-			<!-- <button class="hamburger-menu" :class="{ active: isMobileMenuOpen }" @cdivck="toggleMobileMenu">
-				<div class="hamburger-divne"></div>
-				<div class="hamburger-divne"></div>
-				<div class="hamburger-divne"></div>
-			</button> -->
 		</div>
 
 		<!-- 桌面端导航 -->
-		<div class="nav desktop-nav">
+		<div class="nav desktop-nav" v-if="!isMobile">
 			<div class="am-navss am-navss-pills">
 				<div><router-link class="router" to="/index" @click="closeMobileMenu">{{ $t('message.t1')
 						}}</router-link></div>
@@ -113,12 +151,95 @@ onBeforeUnmount(() => {
 
 		<!-- 移动端遮罩层 -->
 		<!-- <div v-if="isMobileMenuOpen" class="mobile-overlay" @cdivck="closeMobileMenu"></div> -->
+		<el-drawer v-model="drawer" :direction="direction" :before-close="handleClose">
+			<div class="am-navss am-navss-pills">
+				<div><router-link class="router" to="/index" @click="closeMobileMenu">{{ $t('message.t1')
+						}}</router-link></div>
+				<div><router-link class="router" to="/solution" @click="closeMobileMenu">{{ $t('message.t2')
+						}}</router-link></div>
+				<div><router-link class="router" to="/news" @click="closeMobileMenu">{{ $t('message.t3')
+						}}</router-link></div>
+				<!-- <div><router-link class="router" to="/example">客户案例</router-link></div> -->
+				<div><router-link class="router" to="/MainBusiness" @click="closeMobileMenu">{{ $t('message.t4')
+				}}</router-link>
+				</div>
+				<div><router-link class="router" to="/JoinUs" @click="closeMobileMenu">{{ $t('message.t5')
+						}}</router-link></div>
+				<div><router-link class="router" to="/ContactInformation" @click="closeMobileMenu">{{ $t('message.t6')
+						}}</router-link></div>
+			</div>
+		</el-drawer>
 	</div>
 </template>
 
 
 
 <style lang="scss" scoped>
+// .el-drawer .el-drawer__body .am-navss div .router
+// Vue 3 深度渗透选择器示例
+:deep(.el-drawer) {
+	// height: 36% !important;
+	// 高度自适应怎么写
+	height: auto!important;
+	
+
+	.el-drawer__header {
+		padding: 1rem;
+		border-bottom: 1px solid #eee;
+		margin-bottom: 0rem !important;
+	}
+
+	.el-drawer__body {
+		padding: 0rem 2rem;
+
+		.am-navss {
+			flex-direction: column;
+
+			div {
+				width: 100%;
+				text-align: left;
+
+				.router {
+					padding: 1rem 0;
+					border-bottom: 1px solid #f0f0f0;
+					font-size: 1.2rem;
+
+					&:hover {
+						color: #F7B334;
+					}
+				}
+			}
+		}
+	}
+}
+
+.header-mobile {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 2rem 5rem;
+	background-color: #fff;
+	position: relative;
+	z-index: 1000;
+
+	img {
+		width: 4rem;
+		height: 4rem;
+	}
+
+	.header-mobile-title {
+		display: flex;
+		align-items: center;
+		
+	}
+	>div:nth-child(3){
+			width: 4rem;
+			height: 4rem;
+		}
+
+
+}
+
 // 当前路由高亮样式
 .router.router-link-active {
 	cursor: default;
@@ -169,7 +290,8 @@ onBeforeUnmount(() => {
 }
 
 .nav {
-	margin:0rem auto;
+	margin: 0rem auto;
+
 	@media screen and (min-width: 1024px) {
 		padding-left: 1rem;
 		padding-bottom: 0.8rem;
@@ -221,7 +343,7 @@ onBeforeUnmount(() => {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin:0 auto;
+	margin: 0 auto;
 
 	// @media screen and (min-width: 768px) {
 	// 	padding-left: 100px;
@@ -242,10 +364,11 @@ onBeforeUnmount(() => {
 	display: flex;
 	justify-content: start;
 	padding: 0.66rem 0;
-	>img{
+
+	>img {
 		width: 4.5rem;
 		height: 4.5rem;
-		margin:0rem 1rem 0rem 0rem;
+		margin: 0rem 1rem 0rem 0rem;
 	}
 
 	// @media screen and (min-width: 768px) {
@@ -257,15 +380,17 @@ onBeforeUnmount(() => {
 	// 	// width: 40rem;
 	// }
 }
-.mainTitle{
+
+.mainTitle {
 	font-size: 2rem;
 	font-weight: bold;
 	color: #0F409E;
 }
-.assistantTitle{
+
+.assistantTitle {
 	font-size: 1rem;
 	line-height: 1rem;
-	color:#999999;
+	color: #999999;
 }
 
 // 移动端导航样式
@@ -323,10 +448,10 @@ onBeforeUnmount(() => {
 // 语言切换器响应式
 .lang-switcher {
 	@media screen and (max-width: 767px) {
-		position: fixed;
-		top: 20px;
-		right: 80px;
-		z-index: 1002;
+		// position: fixed;
+		// top: 20px;
+		// right: 80px;
+		// z-index: 1002;
 	}
 
 	@media screen and (min-width: 1024px) {

src/styles/main.scss

@@ -9,7 +9,7 @@
 @import './responsive.css'; 
 html { font-size: 10px; }                  /* fallback */
 html { 
-    font-size: clamp(5px, 0.9vw, 15px);
+    font-size: clamp(8px, 0.9vw, 15px);
     width: 100vw;
     height: 100vh;
  }  /* modern */
@@ -53,4 +53,7 @@ html {
     >div{
         height: 44.7rem;
     }
+    @media screen and (max-width: 767px) {
+		margin-top: 10rem;
+	}
 }

src/views/ContactInformation.vue

@@ -111,5 +111,14 @@ onMounted(() => {
             margin-top:0.5rem;
         }
     }
+    @media screen and (max-width: 767px) {
+        flex-direction: column;
+        align-items: center;
+        >div {
+            width: 80%;
+            margin-bottom: 2rem;
+            padding:2rem 2rem;
+        }
+    }
 }
 </style>

src/views/IndexView.vue

@@ -307,14 +307,26 @@ const handleGoNew = () => {
 const goDetail = (id) => {
 	route.push(`/newsDetail/${id}`);
 }
+// 移动端判断
+const isMobile = ref(false)
+
+// 检查是否为移动端
+const checkMobile = () => {
+	isMobile.value = window.innerWidth <= 768
+}
 onMounted(() => {
 	// videoPlayer.value.play();
 	// getSlideshow();
 	// getAdvantage();
 	// getService();
+	// 初始化检查移动端
+	checkMobile()
+	// 监听窗口大小变化
+	window.addEventListener('resize', checkMobile)
 	swiper();
 })
 onBeforeUnmount(() => {
+	window.removeEventListener('resize', checkMobile)
 	clearData();
 })
 </script>
@@ -324,7 +336,7 @@ onBeforeUnmount(() => {
 			<div class="index-page">
 				<!-- 使用Swiper替换原有的轮播 -->
 				<Swiper :modules="modules" :slides-per-view="1" :space-between="0" :pagination="{ clickable: true }"
-					:mousewheel="false" :allowTouchMove="false" :autoplay="{ delay: 3000, disableOnInteraction: false }"
+					:mousewheel="false" :allowTouchMove="true" :autoplay="{ delay: 3000, disableOnInteraction: false }"
 					:loop="true" @swiper="onSwiper" @slideChange="onSlideChange" class="home-swiper">
 					<SwiperSlide v-for="(slide, index) in slideshow" :key="index" class="swiper-slide-item" :style="{
 						backgroundImage: `url(${slide.ImageUrl})`,
@@ -340,12 +352,13 @@ onBeforeUnmount(() => {
 			</div>
 		</div>
 		<div class="news-section">
+			<div class="newsTitle" v-if="isMobile">{{ $t('message.t3') }}</div>
 			<div>
 				<img src="../assets/images/newIndex/news.jpg" alt="" style="width: 100%; height: 100%;"
 					@click="goDetail(4)">
 			</div>
 			<div class="news-content">
-				<div class="newsTitle">{{ $t('message.t3') }}</div>
+				<div class="newsTitle" v-if="!isMobile">{{ $t('message.t3') }}</div>
 				<div class="news-boxes">
 					<div v-for="item in newsList" :key="item.title" class="news-item" @click="goDetail(item.id)">
 						<div class="news-item-title">{{ item.title }}</div>
@@ -731,11 +744,17 @@ onBeforeUnmount(() => {
 		width: 70%;
 		display: flex;
 		flex: 1;
-		margin-top: 18rem;
+		margin-top: 6rem;
 		height: 46.6rem;
 
 	}
 
+	@media screen and (max-width: 767px) {
+		width: 100%;
+		flex-direction: column;
+		margin-top: 0;
+	}
+
 	>div {
 		@media screen and (min-width: 1024px) {
 			width: 50%;
@@ -754,11 +773,36 @@ onBeforeUnmount(() => {
 	}
 
 	>div:nth-child(1) {
-		width: 57%;
+		@media screen and (min-width: 1024px) {
+			width: 57%;
+		}
+
+		@media screen and (max-width: 767px) {
+			width: 80%;
+			padding: 1.5rem 1rem;
+			margin:0rem auto 2rem;
+			font-size: 2.2rem;
+			border-bottom: 0.3rem solid #F7B334;
+			font-weight: 700;
+		}
 	}
 
 	>div:nth-child(2) {
-		width: 38%;
+		@media screen and (min-width: 1024px) {
+			width: 38%;
+		}
+
+		@media screen and (max-width: 767px) {
+			width: 80%;
+			margin: 0rem auto;
+		}
+	}
+	>div:nth-child(3) {
+
+		@media screen and (max-width: 767px) {
+			width: 100%;
+			margin: 1rem auto;
+		}
 	}
 
 	.news-content {
@@ -778,6 +822,13 @@ onBeforeUnmount(() => {
 			// display: flex;
 			// flex-wrap: wrap;
 		}
+		@media screen and (max-width: 767px) {
+			width: 90%;
+			margin: 1rem auto;
+			>div:nth-child(1) {
+				margin-top: 0;
+			}
+		}
 
 		// >div:nth-child(even) {
 		// 	@media screen and (min-width: 1024px) {
@@ -803,6 +854,14 @@ onBeforeUnmount(() => {
 			margin-top: 2rem;
 			font-size: 1.6rem;
 		}
+		@media screen and (max-width: 767px) {
+			width: 100%;
+			border-bottom: 1px solid #e9e9e9;
+			margin-top: 1.5rem;
+			font-size: 1.4rem;
+			padding:0rem 0rem 1rem;
+			
+		}
 	}
 
 	.news-item-title {
@@ -810,6 +869,11 @@ onBeforeUnmount(() => {
 		font-size: 1.1rem;
 		line-height: 1.6;
 		height: 3.8rem;
+		@media screen and (max-width: 767px) {
+			font-size: 1.6rem;
+			height: 5.8rem;
+			
+		}
 	}
 
 	.news-item-content {
@@ -825,6 +889,10 @@ onBeforeUnmount(() => {
 		line-height: 1.4;
 		max-height: 4.2em;
 		/* 3行 × 1.4行高 = 4.2em */
+		@media screen and (max-width: 767px) {
+			font-size: 1.3rem;
+			
+		}
 	}
 
 	.news-item-date {
@@ -832,6 +900,11 @@ onBeforeUnmount(() => {
 			font-size: 1rem;
 			color: #999;
 		}
+		@media screen and (max-width: 767px) {
+			font-size: 1.2rem;
+			color: #999;
+			margin-top: 0.5rem;
+		}
 	}
 
 	.newsBtn {
@@ -844,24 +917,47 @@ onBeforeUnmount(() => {
 			width: 10rem;
 			margin-top: 1rem;
 		}
+		@media screen and (max-width: 767px) {
+			padding: 0.6rem 0rem;
+			background-color: #F7B334;
+			color: white;
+			font-size: 1.2rem;
+			text-align: center;
+			width: 10rem;
+			margin: 1rem auto;
+			
+		}
 	}
 }
 
 .group-section {
 	width: 70%;
+	@media screen and (max-width: 767px) {
+		width: 90%;
+		display: flex;
+		flex-direction: column;
+		// margin:0 auto;
+	}
 }
 
 .group-title {
 	font-size: 2rem;
-		font-weight: bold;
-		text-align: center;
-		margin-top: 4rem;
+	font-weight: bold;
+	text-align: center;
+	margin-top: 4rem;
+
 	@media screen and (min-width: 1024px) {
 		font-size: 2rem;
 		font-weight: bold;
 		text-align: center;
 		margin-top: 4rem;
 	}
+	@media screen and (max-width: 767px) {
+		font-size: 1.8rem;
+		font-weight: bold;
+		text-align: center;
+		margin-top: 1rem;		
+	}
 }
 
 
@@ -889,36 +985,49 @@ onBeforeUnmount(() => {
 
 .group-item {
 	// @media screen and (min-width: 1024px) {
-		width: 17.5%;
-		margin: 1rem 0rem;
+	width: 17.5%;
+	margin: 1rem 0rem;
+	padding: 0.65rem 0.4rem;
+	border: 1px solid #e9e9e9;
+	border-radius: 8px;
+	background-color: white;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	color: #F7B334;
+	font-size: 1.1rem;
+	@media screen and (max-width: 767px) {
+		width: 30%;
+		margin: 0.5rem auto;
 		padding: 0.65rem 0.4rem;
 		border: 1px solid #e9e9e9;
 		border-radius: 8px;
 		background-color: white;
 		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 		color: #F7B334;
-		font-size: 1.1rem;
+		font-size: 1.2rem;
+		
+	}
 
-		>div:nth-child(1) {
-			@media screen and (min-width: 1024px) {
-				margin-top: 1.3rem;
-				font-size: 1.2rem;
-				// font-weight: 550;
-				border-bottom: 3px;
-			}
+	>div:nth-child(1) {
+		@media screen and (min-width: 1024px) {
+			margin-top: 1.3rem;
+			font-size: 1.2rem;
+			// font-weight: 550;
+			border-bottom: 3px;
 		}
+	}
 
-		>div:nth-child(2) {
-			border: 1px solid #F7B334;
-			width: 80%;
-			margin: 0.5rem auto;
-		}
+	>div:nth-child(2) {
+		border: 1px solid #F7B334;
+		width: 80%;
+		margin: 0.5rem auto;
+	}
+
+	>img {
+		width: 1.5rem;
+		height: 1.5rem;
+		margin-top: 0.3rem;
+	}
 
-		>img {
-			width: 1.5rem;
-			height: 1.5rem;
-			margin-top: 0.3rem;
-		}
 	// }
 }
 
@@ -942,6 +1051,10 @@ onBeforeUnmount(() => {
 .swiper {
 	width: 100%;
 	height: 44.7rem;
+
+	@media screen and (max-width: 767px) {
+		height: 34rem;
+	}
 }
 
 .swiper-slide {

src/views/JoinDetail.vue

@@ -38,7 +38,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>
@@ -71,6 +71,9 @@ const goBack = () => {
     font-weight: 550;
     margin: 3rem 0px 0.7rem;
     text-align: center;
+    @media screen and (max-width: 767px) {
+        margin: 4rem 0px 0.7rem;
+    }
 
 }
 
@@ -94,6 +97,9 @@ const goBack = () => {
     margin: 0 auto;
     font-size:1.2rem;
     line-height: 2rem;
+     @media screen and (max-width: 767px) {
+        width: 80%;
+    }
 }
 
 .joinTitle {
@@ -122,5 +128,9 @@ const goBack = () => {
         width: 100%;
         height: 100%;
     }
+    @media screen and (max-width: 767px) {
+        left: 8%;
+        top: -3rem;
+    }
 }
 </style>

src/views/JoinUs.vue

@@ -3,15 +3,15 @@ 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:  2 },
-    { number:  3 },
-    { number:  4},
-    { number:  5},
-    { number:  6},
-    { number:  7},
-    { number:  8},
-    { number:  9}
+    { number: 1, title: '【社会招聘】中烟国际集团有限公司集团信息技术管理岗招聘', date: '2025-06-07' },
+    { number: 2 },
+    { number: 3 },
+    { number: 4 },
+    { number: 5 },
+    { number: 6 },
+    { number: 7 },
+    { number: 8 },
+    { number: 9 }
 ]);
 const isShowDetail = ref(false); // 控制招聘详情的显示
 const handleClick = () => {
@@ -27,51 +27,63 @@ const handleGoBack = (val) => {
 
 <template>
     <div>
-     <Layout>
-        <div class="joinContainer">
-            <div class="index-page">
-                <div class="page-header-sub">
-                <img src="../assets/images/zp.png" alt="">
-            </div>
-            </div>
-            <div class="join-content" v-if="!isShowDetail">
-                <div class="joinTitle">招聘信息</div>
-                <div v-for="(item,index) in list" :key="item.number" class="joinContentItem" @click="handleClick">
-                    <div>{{ item.title }}</div>
-                    <div>{{ item.date }}</div>
+        <Layout>
+            <div class="joinContainer">
+                <div class="index-page">
+                    <div class="page-header-sub">
+                        <img src="../assets/images/zp.png" alt="">
+                    </div>
+                </div>
+                <div class="join-content" v-if="!isShowDetail">
+                    <div class="joinTitle">招聘信息</div>
+                    <div v-for="(item, index) in list" :key="item.number" class="joinContentItem" @click="handleClick">
+                        <div>{{ item.title }}</div>
+                        <div>{{ item.date }}</div>
+                    </div>
                 </div>
+                <JoinDetail @goBack="handleGoBack" v-else />
+
             </div>
-            <JoinDetail  @goBack="handleGoBack" v-else />
-            
-        </div>
-     </Layout>
+        </Layout>
     </div>
 
 </template>
 <style scoped>
-.join-content{
+.join-content {
     width: 66%;
-    padding:0 17% 2rem;
+    padding: 0 17% 2rem;
     border-bottom: 1px solid #ddd;
+
+    @media screen and (max-width: 767px) {
+        width: 90%;
+        padding: 2rem;
+    }
 }
-.joinBox{
-    >img{
+
+.joinBox {
+    >img {
         width: 100%;
         height: 100%;
     }
 }
-.joinTitle{
+
+.joinTitle {
     font-size: 1.8rem;
     font-weight: bold;
     margin: 4rem 0px 2rem;
     padding-bottom: 1rem;
-    border-bottom:2px solid #F7B334
+    border-bottom: 2px solid #F7B334;
+    
+    @media screen and (max-width: 767px) {
+       margin-top:1rem; 
+    }
 }
-.joinContentItem{
+
+.joinContentItem {
     height: 3rem;
     display: flex;
     justify-content: space-between;
-    margin-bottom:1rem;
+    margin-bottom: 1rem;
     color: #555;
     font-size: 1.2rem;
     cursor: pointer;

src/views/MainBusiness.vue

@@ -102,9 +102,9 @@ import Layout from '../components/common/Layout.vue';
 
     >div {
         width: 45%;
-        height: 15rem;
+        // height: 15rem;
         background: #fff;
-        padding: 20px;
+        padding: 1.3rem;
         text-align: center;
         font-size: 1.6rem;
         font-weight: 550;
@@ -129,5 +129,17 @@ import Layout from '../components/common/Layout.vue';
     >div:nth-child(1) {
         margin-right: 5rem;
     }
+    @media screen and (max-width: 767px) {
+        width: 100%;
+        display: block;
+        >div {
+            padding:0rem;
+            width: 100%;
+            margin-bottom: 2rem;
+            padding-bottom:2rem;
+            padding-top:1rem;
+        }
+        
+    }
 }
 </style>

src/views/Solution.vue

@@ -32,7 +32,7 @@ onUpdated(() => {
           <div>{{ $t('message.zygjjtContent1') }}</div>
         </div>
         <div class="content2">
-          <div class="title">{{ $t('message.zygjjt') }}</div>
+          <div class="title">{{ $t('message.zygjjt1') }}</div>
           <div>{{ $t('message.zygjjtContent2') }}</div>
         </div>
       </div>
@@ -54,6 +54,10 @@ onUpdated(() => {
   margin: 0 auto ;
   padding:4rem 17% 3.5rem;
   border-bottom: 1px solid #eee;
+   @media screen and (max-width: 767px) {
+        width: 80%;
+        padding:1rem;
+    }
 }
 
 .groupTitle {
@@ -66,6 +70,9 @@ onUpdated(() => {
   justify-content: center;
   background: url('../assets/images/ppic.png') no-repeat center;
   padding: 0rem 1.5rem;
+  @media screen and (max-width: 767px) {
+        display: none;
+    }
 }
 
 .title {
@@ -91,6 +98,11 @@ onUpdated(() => {
   >div {
     text-indent: 2em;
   }
+  @media screen and (max-width: 767px) {
+        width: 100%;
+        margin-top:2rem;
+        margin-left: 0;
+    }
 }
 
 

src/views/SubGroup.vue

@@ -82,9 +82,8 @@ onMounted(() => {
     <div>
         <Layout>
             <div class="subGroupBox">
-
                 <div class="subGroupContainer">
-                    <div class="subGroupContent">
+                    <div class="page-header-sub">
                         <img src="../assets/images/group.png" alt="">
                     </div>
                     <div class="back" @click="goBack">
@@ -137,6 +136,10 @@ onMounted(() => {
     /* 阴影右侧设置 */
     border-radius: 5px;
     border-right: 3px solid #F7B334;
+      @media screen and (max-width: 767px) {
+        width: 100%;
+        
+    }
 
     >div:nth-child(1) {
         font-size: 1.6rem;
@@ -154,6 +157,7 @@ onMounted(() => {
         padding-top: 2rem;
         border-top: 1px solid #F7B334;
     }
+
 }
 
 .side {
@@ -168,6 +172,10 @@ onMounted(() => {
     >div:nth-child(1) {
         margin-top: 4rem;
     }
+    @media screen and (max-width: 767px) {
+        display: none;
+        
+    }
 }
 
 .website {
@@ -185,5 +193,9 @@ onMounted(() => {
         width: 100%;
         height: 100%;
     }
+    @media screen and (max-width: 767px) {
+      margin:2rem 2rem 2rem 8rem;
+        
+    }
 }
 </style>

src/views/components/LanguageSwitcher.vue

@@ -15,13 +15,19 @@
       </div>
     </div>
     <div class="changeL" ref="changeL">
-      <el-dropdown @command="handleCommand">
-        <img src="../../assets/images/newIndex/changeL.png" alt="" style="width: 100%;height: 100%;">
+      <el-dropdown 
+        @command="handleCommand"
+        trigger="click"
+        placement="bottom-end"
+        :hide-on-click="true"
+        :max-height="200"
+      >
+        <img src="../../assets/images/net.png" alt="" style="width: 100%;height: 100%; cursor: pointer;">
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item command="en">EN</el-dropdown-item>
-            <el-dropdown-item command="zhCN">简体中文</el-dropdown-item>
-            <el-dropdown-item command="zhTW">繁体中文</el-dropdown-item>
+            <el-dropdown-item command="en" :class="{ active: currentLang === 'en' }">EN</el-dropdown-item>
+            <el-dropdown-item command="zhCN" :class="{ active: currentLang === 'zhCN' }">简体中文</el-dropdown-item>
+            <el-dropdown-item command="zhTW" :class="{ active: currentLang === 'zhTW' }">繁体中文</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -31,7 +37,7 @@
 
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onBeforeUnmount } from 'vue';
 const { locale } = useI18n();
 
 // 当前选中的语言
@@ -57,11 +63,15 @@ const changeLanguage = (lang) => {
   }
 };
 const changeL = ref(null);
+
 // 监听页面宽度
 const screenWidth = ref(window.innerWidth);  // 初始化屏幕宽度
-window.onresize = () => {
+
+// 响应式处理函数
+const handleResize = () => {
   screenWidth.value = window.innerWidth;
-  console.log(screenWidth.value);
+  console.log('当前屏幕宽度:', screenWidth.value);
+  console.log('changeL元素:', changeL.value);
 
   // 当页面宽度小于768时，隐藏类名是changeItem的div
   if (screenWidth.value < 768) {
@@ -69,16 +79,32 @@ window.onresize = () => {
     document.querySelectorAll('.changeItem').forEach(item => {
       item.style.display = 'none'
     });
-    changeL.value.style.display = 'block'
+    document.querySelector('.changeLL').style.display = 'none';
+    
+    // 安全检查changeL.value是否存在
+    if (changeL.value) {
+      changeL.value.style.display = 'block'
+    } else {
+      console.warn('changeL元素未找到');
+    }
   } else {
-    changeL.value.style.display = 'none';
+    // 安全检查changeL.value是否存在
+    if (changeL.value) {
+      changeL.value.style.display = 'none';
+    }
     document.querySelectorAll('.changeItem').forEach(item => {
       item.style.display = 'block'
     });
-    // document.querySelector('.el-button').style.display = 'block';
   }
 };
+
+// 使用addEventListener而不是直接赋值
+const resizeListener = () => {
+  handleResize();
+};
+
 const handleCommand = (command) => {
+  console.log('下拉菜单选择:', command);
   changeLanguage(command);
 }
 onMounted(() => {
@@ -97,28 +123,44 @@ onMounted(() => {
   }
   console.log(`初始化语言: ${savedLanguage}`);
 
-  // 响应式处理
-  if (screenWidth.value < 768) {
-    document.querySelectorAll('.changeItem').forEach(item => {
-      item.style.display = 'none';
-    });
-    changeL.value.style.display = 'block';
-  } else {
-    changeL.value.style.display = 'none';
-    document.querySelectorAll('.changeItem').forEach(item => {
-      item.style.display = 'block';
-    });
-  }
+  // 延迟执行响应式处理，避免与dropdown初始化冲突
+  setTimeout(() => {
+    // 添加resize监听器
+    window.addEventListener('resize', resizeListener);
+    
+    // 初始化响应式处理
+    handleResize();
+  }, 100);
+});
+
+// 组件卸载时清理事件监听器
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', resizeListener);
 });
 
 </script>
 <style scoped>
 .changeL {
-  width: 30px;
-  height: 30px;
-  position: fixed;
-  right: 2px;
-  top: 50%;
+  width: 4rem;
+  height: 4rem;
+}
+
+/* dropdown菜单样式 */
+:deep(.el-dropdown-menu) {
+  min-width: 120px !important;
+  
+  .el-dropdown-menu__item {
+    padding: 8px 16px;
+    
+    &.active {
+      color: #F7B334;
+      background-color: #fff7e6;
+    }
+    
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
 }
 
 .changeItem {

src/views/news.vue

@@ -47,8 +47,8 @@ const list = ref([
         title: '中烟国际集团有限公司召开2025年度工作会议传达学习2025年全国烟草工作会议精神',
         desc: '1月20日，中烟国际集团有限公司在香港召开2025年度工作会议，认真学习贯彻2025年全国烟草工作会议精神，总结2024年工作，分析当前国际形势和内部调整，部署2025年工作任务。中烟国际集团有限公司党组书记、董事长、总经理邵岩作工作报告',
     },
-    
-    
+
+
 ])
 const router = useRouter()
 
@@ -146,6 +146,10 @@ onMounted(() => {
     padding: 4rem 0;
     width: 65%;
 
+    @media screen and (max-width: 767px) {
+        width: 80%;
+    }
+
 }
 
 /* 侧边栏 */
@@ -171,6 +175,10 @@ onMounted(() => {
             font-weight: bold;
         }
     }
+
+    @media screen and (max-width: 767px) {
+        display: none;
+    }
 }
 
 /* 新闻列表 */
@@ -184,6 +192,10 @@ onMounted(() => {
         padding-top: 0;
     }
 
+    @media screen and (max-width: 767px) {
+        margin-left: 0;
+    }
+
     .news-item {
         display: flex;
         gap: 1.5rem;
@@ -191,7 +203,6 @@ onMounted(() => {
         padding: 1rem 0rem;
 
         @media screen and (max-width: 767px) {
-            flex-direction: column;
             padding-bottom: 1.5rem;
         }
 

src/views/newsDetail.vue

@@ -222,7 +222,11 @@ onMounted(() => {
     >img {
         height: 100%;
         width: 65%;
-        height: 100%;
+    }
+
+    @media screen and (max-width: 767px) {
+        width: 80%;
+        height: 12rem;
     }
 
     >img:nth-child(1) {
@@ -276,5 +280,11 @@ onMounted(() => {
         width: 100%;
         height: 100%;
     }
+
+    @media screen and (max-width: 767px) {
+        left: 14%;
+        top: 12.5rem;
+
+    }
 }
 </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.7afa27af.js"></script>
-    <link rel="stylesheet" href="./assets/css/index.dd9ac16e.css">
+    <script type="module" crossorigin src="./assets/js/index.dc51ebc9.js"></script>
+    <link rel="stylesheet" href="./assets/css/index.ce2e2e9b.css">
   </head>
   <body>
     <div id="app"></div>