aboutus的图片没有自适应与projectdetail页面的样式调整

src/views/aboutus.vue

@@ -64,7 +64,8 @@
 				<div style="color:rgba(60,115,164);font-size:40px">{{componyarr[0].sketchIn}}
 				</div>
 				<div style="height: 40px;"></div>
-                <div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;" class="init" v-html="componyarr[0].contentIn">
+				<div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;" class="init"
+					v-html="componyarr[0].contentIn">
 
 				</div>
 				<div style="height: 40px;"></div>
@@ -75,7 +76,8 @@
 				<div style="color:rgba(60,115,164);font-size:40px">{{componyarr[0].sketchDown}}
 				</div>
 				<div style="height: 40px;"></div>
-                <div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;"  class="init" v-html="componyarr[0].contentDown">
+				<div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;" class="init"
+					v-html="componyarr[0].contentDown">
 
 				</div>
 				<div style="height: 70px;"></div>
@@ -147,24 +149,25 @@
 					</ul>
 				</div>
 			</div>
-            <div style="width: 80%;margin: auto;flex-wrap: wrap;justify-content: space-between; display: grid;
+			<div class="images_cl">
-  grid-template-columns: repeat(auto-fill, minmax(31.33%, 1fr));
+				<div style="width:   auto;margin-bottom: 20px;border-radius: 10px;cursor: pointer;"
-  grid-column-gap: 2%;">
+					v-for="item in honorList" :key="item.id" @click="changeto(item.id)">
-                <div style="width:   auto;margin-bottom: 20px;border-radius: 10px;cursor: pointer;" v-for="item in honorList" :key="item.id" @click="changeto(item.id)">
 					<div style="background-color: rgb(240,246,250);    border-radius: 14px 14px 0 0;">
 
 
 					</div>
 
-                    <div style="height: 100%;text-align: center;    border: 5px solid #F8F8F8;">
+					<div class="img_cl" style="height: 100%;text-align: center;    border: 5px solid #F8F8F8;">
 
 
-                            <img :src="item.picture" alt="200603" style="scale: 0.85;height: 285px;width: 379px"> </div>
+						<img :src="item.picture" alt="200603" style="scale: 0.85;height: 285px;width: 379px">
+					</div>
 				</div>
 
 
 			</div>
-            <div v-if="!honorList.length" style="height: 400px;display: flex;justify-content: center;align-items: center;">
+			<div v-if="!honorList.length"
+				style="height: 400px;display: flex;justify-content: center;align-items: center;">
 				<div style="color: #999;">该年份暂无内容展示</div>
 			</div>
 		</div>
@@ -225,16 +228,20 @@
 	</div>
 </template>
 <script>
-import { honor,culture,compony } from '@/api';
+	import {
-import { honorList } from '@/api';
+		honor,
+		culture,
+		compony
+	} from '@/api';
+	import {
+		honorList
+	} from '@/api';
 	export default {
 		data() {
 			return {
 				activeName: 'first',
 				timeIndex: 0,
-            timeLineList:
+				timeLineList: [{
-             [
-             {
 					"timestamp": "全部",
 					"color": "#999",
 					"fontsize": 18,
@@ -335,7 +342,11 @@ export default {
 			async getHonner(year) {
 
 
-        const {data:res} = await honorList({'year':year});
+				const {
+					data: res
+				} = await honorList({
+					'year': year
+				});
 				console.log(res)
 				this.honorList = res
 			},
@@ -355,8 +366,7 @@ export default {
 				//     this.$refs.mytimeline.style.marginLeft = marginLeft - 220 + 'px';
 				if (this.timeIndex < 1) {
 					return
-            }
+				} else {
-            else {
 					this.timeIndex = this.timeIndex - 1
 					console.log(this.timeIndex)
 					const year = this.timeLineList[this.timeIndex].year
@@ -387,7 +397,30 @@ export default {
 		}
 	};
 </script>
-<style scoped>
+<style scoped lang="scss">
+	.images_cl {
+		width: 80%;
+		margin: auto;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(31.33%, 1fr));
+	}
+	@media screen and (max-width:1523px) {
+		.img_cl {
+			img {
+				width: 100% !important;
+			}
+		}
+	}
+	
+	@media screen and (max-width:1241px) {
+		.images_cl {
+			grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
+		}
+	}
+
+
 	.compbg {
 		background-image: url('../assets/images/banner.png');
 	}
@@ -702,10 +735,11 @@ li {
     margin-left: -22px; */
 		flex: 0.5
 	}
+
 	.init p {
 		margin: 16px 0
-
 	}
+
 	.ul_box {
 		width: 100%;
 

src/views/projectdetail.vue

@@ -53,7 +53,9 @@
 	</div>
 </template>
 <script>
-import { projectdetail } from '@/api';
+	import {
+		projectdetail
+	} from '@/api';
 	export default {
 		data() {
 			return {
@@ -86,21 +88,25 @@ export default{
 		position: static;
 		margin-bottom: 28px;
 	}
+
 	.name {
 		font-size: 30px;
 		color: #0007a9;
 		color: rgba(0, 7, 169, .8);
 		line-height: 36px;
 	}
+
 	.news_d {
-    padding: 60px 0 90px;
+		padding: 60px 0 0px;
 		overflow: hidden;
 	}
+
 	.Wrapper {
 		position: relative;
 		background-color: #fff;
 		z-index: 100;
 	}
+
 	/* .news_d .name {
     font-size: 30px;
     color: #0007a9;
@@ -117,6 +123,7 @@ border: none;
 	::v-deep .el-tabs__nav-wrap::after {
 		background-color: transparent;
 	}
+
 	.news_d .con p {
 		font-size: 14.5px;
 		color: #8e8e95;
@@ -147,9 +154,11 @@ background-color: transparent;
 		top: 0;
 		z-index: -1;
 	}
+
 	.top-box {
 		margin: 16px 0 30px;
 	}
+
 	.date {
 
 		font-size: 26px;
@@ -160,10 +169,12 @@ background-color: transparent;
 		padding: 0 30px;
 		width: 100%;
 	}
+
 	.page_ban .content {
 		position: relative;
 		height: 100%;
 	}
+
 	.content {
 		width: 86%;
 		margin: 0 auto;
@@ -175,6 +186,7 @@ background-color: transparent;
 		left: 0;
 		bottom: 0;
 	}
+
 	div,
 	li {
 		box-sizing: border-box;
@@ -227,48 +239,56 @@ li {
 		color: rgba(255, 255, 255, 0.8);
 		font-weight: bold;
 	}
+
 	.z_xq_cont_top_lt {
 		font-size: 25px;
 		color: #000000;
 		margin-top: 55px;
 		font-weight: bold;
 	}
+
 	.z_xq_cont_top_ls {
 		font-size: 20px;
 		color: #263d8f;
 		margin: 20px 0;
 	}
+
 	.z_xq_cont_top_lc {
 		overflow: hidden;
 	}
+
 	.z_xq_cont_top_lc img {
 		-webkit-box-sizing: border-box;
 		box-sizing: border-box;
 		vertical-align: middle;
 		border: 0;
 	}
+
 	.z_xq_cont_top_lx {
 		height: 88px;
 		border-left: 1px solid #CCCCCC;
 		padding-left: 10px;
 		margin-top: 50px;
 	}
+
 	.z_xq_cont_top_lx .jzmssj {
 		font-size: 46px;
 		color: #263d8f;
 		font-weight: 100;
 		line-height: 52px;
 	}
+
 	.z_xq_cont_top_lx .jzmssj .dwi {
 		font-size: 14px;
 		color: #666666;
 	}
+
 	.cont {
-	width: 70%;
+		display: flex;
-	margin: 0 auto;
+		width: 100%;
-}
-.cont >>> img{
-max-width:500px;
 	}
 
+	.cont>>>img {
+		width: 100%;
+	}
 </style>