Commit fee62f3d07c62c4cd8280837c4e92f058225f5e8
1 parent
b106b009
Exists in
master
fix:成果
Showing
5 changed files
with
222 additions
and
222 deletions
 
Show diff stats
38 KB
src/main.js
| 1 | 1 | import Vue from 'vue' | 
| 2 | -import { Popup, Toast, Picker, Tag, Tab, Tabs, Area, Search, Swipe, SwipeItem, Cell, List, Collapse, CollapseItem, Button, Field, Icon, Sticky, DropdownMenu, DropdownItem, Rate, Calendar, Checkbox, Empty, Lazyload, Radio, RadioGroup, CellGroup, Dialog, CheckboxGroup, NavBar, PullRefresh, Cascader } from 'vant'; | |
| 2 | +import { Popup, Toast, Picker, Tag, Tab, Tabs, Area, Search, Swipe, SwipeItem, Cell, List, Collapse, CollapseItem, Button, Field, Icon, Sticky, DropdownMenu, DropdownItem, Rate, Calendar, Checkbox, Empty, Lazyload, Radio, RadioGroup, CellGroup, Dialog, CheckboxGroup, NavBar, PullRefresh, Cascader , ImagePreview } from 'vant'; | |
| 3 | 3 | import App from './App.vue' | 
| 4 | 4 | import router from './router' | 
| 5 | 5 | import store from './store' | 
| ... | ... | @@ -8,9 +8,10 @@ import Moment from 'moment' | 
| 8 | 8 | Vue.prototype.Moment = Moment; | 
| 9 | 9 | |
| 10 | 10 | // Vue.prototype.yanxueUrl = 'https://yanxue.myjxt.com'; | 
| 11 | +Vue.prototype.dataUrl = 'http://47.110.50.251:9010' | |
| 11 | 12 | |
| 12 | -// import yxAxios from '@/https/yxAxios' | |
| 13 | -// Vue.prototype.yxAxios = yxAxios; | |
| 13 | +import yxAxios from '@/https/yxAxios' | |
| 14 | +Vue.prototype.yxAxios = yxAxios; | |
| 14 | 15 | |
| 15 | 16 | import { mgop } from '@aligov/jssdk-mgop'; | 
| 16 | 17 | Vue.prototype.mgop = mgop; | 
| ... | ... | @@ -51,6 +52,7 @@ Vue | 
| 51 | 52 | .use(PullRefresh) | 
| 52 | 53 | .use(RadioGroup) | 
| 53 | 54 | .use(Cascader) | 
| 55 | + .use(ImagePreview) | |
| 54 | 56 | .use(Radio); | 
| 55 | 57 | Vue.config.productionTip = false; | 
| 56 | 58 | Vue.config.ignoredElements = ['wx-open-launch-app']; | ... | ... | 
src/views/Yanxue/achievementsOne.vue
| ... | ... | @@ -7,31 +7,29 @@ | 
| 7 | 7 | <van-tab title="研学旅行"></van-tab> | 
| 8 | 8 | </van-tabs> --> | 
| 9 | 9 | |
| 10 | - <div class="contextBox"> | |
| 11 | - <!-- <div class="art_card" @click="toDetails"> | |
| 12 | - <div class="art_title">庆祝中国共产主义青年团成立100年大会</div> | |
| 13 | - <div class="art_bot"> | |
| 14 | - <div class="redSticky">置顶</div> | |
| 15 | - <div class="greyTime">发布于2022.5.10</div> | |
| 16 | - <div class="greyFont">浏览量 2022</div> | |
| 17 | - </div> | |
| 18 | - </div> --> | |
| 19 | - | |
| 20 | - <div class="art_card_pic" v-for="(v, i) in newsList" :key="i" @click="toDetails(v.videopic)"> | |
| 21 | - <div class="art_context" > | |
| 22 | - <div class="art_title">{{ v.titleName }}</div> | |
| 10 | + <div class="contextBox" v-if="newsList.length != 0"> | |
| 11 | + <div | |
| 12 | + class="art_card_pic" | |
| 13 | + v-for="(v, i) in newsList" | |
| 14 | + :key="i" | |
| 15 | + @click="toDetails(v)" | |
| 16 | + > | |
| 17 | + <div class="art_context"> | |
| 18 | + <div class="art_title">{{ v.titleDesc }}</div> | |
| 23 | 19 | <div class="art_bot"> | 
| 24 | - <div class="redSticky" v-if="v.liul > 1000">置顶</div> | |
| 25 | - <div class="greyTime">发布于2022.7.4</div> | |
| 26 | - <div class="greyFont">浏览量 {{v.liul}}</div> | |
| 20 | + <!-- <div class="redSticky" v-if="v.readNumber">置顶</div> --> | |
| 21 | + <div class="greyTime">发布于 {{ v.createTime ? Moment(v.createTime).format('YYYY-MM-DD HH:mm:ss') : ''}}</div> | |
| 22 | + <div class="greyFont">浏览量 {{ v.readNumber }}</div> | |
| 27 | 23 | </div> | 
| 28 | 24 | </div> | 
| 29 | 25 | <div class="art_pic"> | 
| 30 | - <img :src="v.imgpic" /> | |
| 26 | + <img :src="v.imgUrl" /> | |
| 31 | 27 | </div> | 
| 32 | 28 | </div> | 
| 33 | 29 | </div> | 
| 34 | 30 | |
| 31 | + <van-empty description="暂无数据" v-else/> | |
| 32 | + | |
| 35 | 33 | <div class="imgPic" @click="toChoose"> | 
| 36 | 34 | <img src="@/assets/changeSchool.png" /> | 
| 37 | 35 | </div> | 
| ... | ... | @@ -47,154 +45,37 @@ export default { | 
| 47 | 45 | data() { | 
| 48 | 46 | return { | 
| 49 | 47 | tabsName: 1, | 
| 50 | - list1: [ | |
| 51 | - { | |
| 52 | - titleName: "假日红色研学——酱文化篇", | |
| 53 | - liul: 2022, | |
| 54 | - imgpic: | |
| 55 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/300d6414-1639-4bb8-89b1-3a916dab4359.png", | |
| 56 | - videopic: | |
| 57 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/0676ee97-d5bc-4d6a-ae9b-4f942fcdd213.mp4", | |
| 58 | - }, | |
| 59 | - { | |
| 60 | - titleName: "假日红色研学——消防篇", | |
| 61 | - liul: 1120, | |
| 62 | - imgpic: | |
| 63 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/93314705-ca4e-43a0-b2cd-4ccf8aa9d850.png", | |
| 64 | - videopic: | |
| 65 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/f997a748-4575-4759-9834-e6a34612bc14.mp4", | |
| 66 | - }, | |
| 67 | - { | |
| 68 | - titleName: "假日红色研学——兰亭篇", | |
| 69 | - liul: 320, | |
| 70 | - imgpic: | |
| 71 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/dbe041a4-3c60-411f-afa8-557c18210d06.png", | |
| 72 | - videopic: | |
| 73 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/7850890c-f8d1-4e1d-bfc7-3cd5c6f69e81.mp4", | |
| 74 | - }, | |
| 75 | - { | |
| 76 | - titleName: "假日红色研学——非遗篇", | |
| 77 | - liul: 113, | |
| 78 | - imgpic: | |
| 79 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/f058b51e-48ee-4f11-b571-a0c85c3ab9ce.png", | |
| 80 | - videopic: | |
| 81 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/6e8f66b5-d44c-4ca7-aaf9-c82eec23532f.mp4", | |
| 82 | - }, | |
| 83 | - { | |
| 84 | - titleName: "假日红色研学——黄酒小镇篇", | |
| 85 | - liul: 365, | |
| 86 | - imgpic: | |
| 87 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/1b0b852e-97bd-4faf-9034-159bae23bf88.png", | |
| 88 | - videopic: | |
| 89 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/2d1ef3db-4003-4722-a4a2-853d54a284da.mp4", | |
| 90 | - }, | |
| 91 | - { | |
| 92 | - titleName: "假日红色研学——景岳堂篇", | |
| 93 | - liul: 154, | |
| 94 | - imgpic: | |
| 95 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/75b8a162-1b35-4478-b286-d38e59b25c88.png", | |
| 96 | - videopic: | |
| 97 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/9de14f1c-c996-475c-b839-8d438ca4ec2b.mp4", | |
| 98 | - }, | |
| 99 | - { | |
| 100 | - titleName: "假日红色研学——鲁迅故里篇", | |
| 101 | - liul: 702, | |
| 102 | - imgpic: | |
| 103 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/b3cca4ff-6304-4591-8b35-959034316d11.png", | |
| 104 | - videopic: | |
| 105 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/e06b10f0-4596-44d2-a937-5b038ede70da.mp4", | |
| 106 | - }, | |
| 107 | - { | |
| 108 | - titleName: "假日红色研学——青藤书屋篇", | |
| 109 | - liul: 483, | |
| 110 | - imgpic: | |
| 111 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/d014be8f-e30c-4122-ab98-5d7853b8b525.png", | |
| 112 | - videopic: | |
| 113 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/a68075df-4c33-482a-8be3-b921cf3da7a4.mp4", | |
| 114 | - }, | |
| 115 | - { | |
| 116 | - titleName: "假日红色研学——棠棣篇", | |
| 117 | - liul: 78, | |
| 118 | - imgpic: | |
| 119 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/9664fc60-22ec-44ec-80a1-cb8177963436.png", | |
| 120 | - videopic: | |
| 121 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/cb82b2ed-1f80-48e5-9c39-ef2b0a388aa4.mp4", | |
| 122 | - }, | |
| 123 | - { | |
| 124 | - titleName: "假日红色研学——周恩来祖居篇", | |
| 125 | - liul: 35, | |
| 126 | - imgpic: | |
| 127 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/24c53642-5191-453a-949c-3bef03e6ec4e.png", | |
| 128 | - videopic: | |
| 129 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/d623f9a2-4e70-4fe0-ba52-7703af38248a.mp4", | |
| 130 | - }, | |
| 131 | - { | |
| 132 | - titleName: "假日红色研学——宝业篇", | |
| 133 | - liul: 68, | |
| 134 | - imgpic: | |
| 135 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/1819f0fd-a4cf-44ce-b832-545fe0c571f3.png", | |
| 136 | - videopic: | |
| 137 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/a24a2a12-4771-4b84-b1b5-1612bb200da4.mp4", | |
| 138 | - }, | |
| 139 | - ], | |
| 140 | - list2: [ | |
| 141 | - { | |
| 142 | - titleName: "红馆听老兵爷爷讲故事", | |
| 143 | - liul: 1684, | |
| 144 | - imgpic: | |
| 145 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/c722b105-9e17-4cc9-8cfd-2c98af72f9ec.png", | |
| 146 | - videopic: | |
| 147 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/84a71b3e-3f43-425b-bea3-0a75bbffed1d.mp4", | |
| 148 | - }, | |
| 149 | - { | |
| 150 | - titleName: "雏鹰小队红色研学", | |
| 151 | - liul: 450, | |
| 152 | - imgpic: | |
| 153 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/95cf5713-194f-49ba-8487-7625e2a705fe.png", | |
| 154 | - videopic: | |
| 155 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/43fb6927-e059-4f59-a3c9-0b1b70d2f10a.mp4", | |
| 156 | - }, | |
| 157 | - { | |
| 158 | - titleName: "英才素质拓展训练营", | |
| 159 | - liul: 655, | |
| 160 | - imgpic: | |
| 161 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/59876663-e69f-4f54-abd4-901687192a94.png", | |
| 162 | - videopic: | |
| 163 | - "https://szyundisk.oss-cn-hangzhou.aliyuncs.com/null/6ac9d056-8d59-4bbc-ac99-d44f35557c03.mp4", | |
| 164 | - }, | |
| 165 | - ], | |
| 166 | 48 | newsList: [], | 
| 167 | 49 | }; | 
| 168 | 50 | }, | 
| 169 | - computed: { | |
| 170 | - schoolName() { | |
| 171 | - return this.$route.query.schoolName; | |
| 172 | - }, | |
| 173 | - }, | |
| 174 | - watch: { | |
| 175 | - schoolName: { | |
| 176 | - handler: function (v, k) { | |
| 177 | - if (v == "柯桥区中国轻纺城小学") { | |
| 178 | - this.newsList = JSON.parse(JSON.stringify(this.list2)); | |
| 179 | - } else { | |
| 180 | - this.newsList = JSON.parse(JSON.stringify(this.list1)); | |
| 181 | - } | |
| 182 | - }, | |
| 183 | - immediate: true, | |
| 184 | - }, | |
| 185 | - }, | |
| 186 | 51 | methods: { | 
| 187 | 52 | //详情新闻 | 
| 188 | 53 | toDetails(v) { | 
| 189 | - console.log(this.schoolName); | |
| 190 | - window.open(v); | |
| 191 | - // this.$router.push({ name: "pageDetails" }); | |
| 54 | + this.$router.push({ name: "pageDetails" ,query: {schoolId:v.schoolId,dataId: v.id}}); | |
| 192 | 55 | }, | 
| 193 | 56 | //选择 | 
| 194 | 57 | toChoose() { | 
| 195 | 58 | this.$router.push({ name: "chooseSchoolOne" }); | 
| 196 | 59 | }, | 
| 60 | + getData() { | |
| 61 | + this.yxAxios | |
| 62 | + .post(`${this.dataUrl}/sys/yx/consultList`, { | |
| 63 | + page: 1, | |
| 64 | + pageSize: 999, | |
| 65 | + schoolId: this.$route.query.schoolId*1 | |
| 66 | + }) | |
| 67 | + .then((res) => { | |
| 68 | + if (res.data.success) { | |
| 69 | + this.newsList = res.data.data.list; | |
| 70 | + } else { | |
| 71 | + this.$message.warning(res.data.message); | |
| 72 | + } | |
| 73 | + }); | |
| 74 | + }, | |
| 197 | 75 | }, | 
| 76 | + mounted() { | |
| 77 | + this.getData() | |
| 78 | + } | |
| 198 | 79 | }; | 
| 199 | 80 | </script> | 
| 200 | 81 | ... | ... | 
src/views/Yanxue/chooseSchoolOne.vue
| ... | ... | @@ -24,37 +24,43 @@ export default { | 
| 24 | 24 | data() { | 
| 25 | 25 | return { | 
| 26 | 26 | tabsName: 0, | 
| 27 | - schoolList: [ | |
| 28 | - { schoolName: "柯桥区实验小学" }, | |
| 29 | - { schoolName: "柯桥区中国轻纺城小学" }, | |
| 30 | - ], | |
| 27 | + schoolList: [], | |
| 31 | 28 | }; | 
| 32 | 29 | }, | 
| 33 | 30 | watch: { | 
| 34 | 31 | tabsName(val) { | 
| 35 | - console.log(val); | |
| 36 | 32 | this.schoolList = []; | 
| 37 | - if (val == 0) { | |
| 38 | - this.getList(); | |
| 39 | - } else if (val == 1) { | |
| 40 | - | |
| 41 | - } else if (val == 2) { | |
| 42 | - } | |
| 33 | + this.getList(); | |
| 43 | 34 | }, | 
| 44 | 35 | }, | 
| 45 | 36 | methods: { | 
| 46 | 37 | toActive(v) { | 
| 47 | - this.$router.push({ name: "achievementsOne" ,query: {schoolName: v.schoolName}}); | |
| 38 | + this.$router.push({ | |
| 39 | + name: "achievementsOne", | |
| 40 | + query: { schoolId: v.id }, | |
| 41 | + }); | |
| 48 | 42 | }, | 
| 49 | 43 | //切换 | 
| 50 | 44 | tabsChange() {}, | 
| 51 | 45 | getList() { | 
| 52 | - this.schoolList = [ | |
| 53 | - { schoolName: "柯桥区实验小学" }, | |
| 54 | - { schoolName: "柯桥区中国轻纺城小学" }, | |
| 55 | - ]; | |
| 46 | + this.yxAxios | |
| 47 | + .post(`${this.dataUrl}/sys/yx/schoolList`, { | |
| 48 | + page: 1, | |
| 49 | + pageSize: 999, | |
| 50 | + schoolType: this.tabsName +1 | |
| 51 | + }) | |
| 52 | + .then((res) => { | |
| 53 | + if (res.data.success) { | |
| 54 | + this.schoolList = res.data.data.list; | |
| 55 | + } else { | |
| 56 | + this.$message.warning(res.data.message); | |
| 57 | + } | |
| 58 | + }); | |
| 56 | 59 | }, | 
| 57 | 60 | }, | 
| 61 | + mounted() { | |
| 62 | + this.getList(); | |
| 63 | + }, | |
| 58 | 64 | }; | 
| 59 | 65 | </script> | 
| 60 | 66 | ... | ... | 
src/views/Yanxue/pageDetails.vue
| 1 | 1 | <template> | 
| 2 | - <div> | |
| 3 | - <!-- <div class="box_pic"> | |
| 4 | - <img src="@/assets/login_bg.png" /> | |
| 2 | + <div class="box"> | |
| 3 | + <div class="box_pic" v-if="background"> | |
| 4 | + <img :src="background" /> | |
| 5 | 5 | </div> | 
| 6 | - <div class="article"> | |
| 7 | - <div class="article_title">庆祝中国共产主义青年团成立100年大会</div> | |
| 8 | - <div class="article_time">发布于 2022.5.10 浏览量 2022</div> | |
| 9 | - <div class="article_con">共青团员们,青年朋友们,同志们:</div> | |
| 10 | - </div> --> | |
| 11 | - <div class="videoCss"> | |
| 12 | - <video :src="videopic"></video> | |
| 6 | + | |
| 7 | + <div class="contextCss"> | |
| 8 | + <div class="modelBox" v-for="(v, i) in modelList" :key="i"> | |
| 9 | + <div class="titleCss">{{ v.name }}</div> | |
| 10 | + <!--相册--> | |
| 11 | + <div v-if="v.type == 1" class="typeOne"> | |
| 12 | + <div | |
| 13 | + class="pic" | |
| 14 | + v-for="(x, y) in v.imgList" | |
| 15 | + :key="y" | |
| 16 | + @click="openImg(x, y, v)" | |
| 17 | + > | |
| 18 | + <img :src="x.response" /> | |
| 19 | + </div> | |
| 20 | + </div> | |
| 21 | + <!--视频--> | |
| 22 | + <div v-if="v.type == 2" class="typeTwo"> | |
| 23 | + <div class="videoTwo" v-for="(x, y) in v.videoList" :key="y"> | |
| 24 | + <video controls> | |
| 25 | + <source :src="x" type="video/mp4" /> | |
| 26 | + </video> | |
| 27 | + </div> | |
| 28 | + </div> | |
| 29 | + <!--图文--> | |
| 30 | + <div v-if="v.type == 3" class="typeThree"> | |
| 31 | + <div class="contextThree" v-html="v.context"></div> | |
| 32 | + </div> | |
| 33 | + </div> | |
| 13 | 34 | </div> | 
| 14 | 35 | </div> | 
| 15 | 36 | </template> | 
| 16 | 37 | |
| 17 | 38 | <script> | 
| 39 | +import { ImagePreview } from "vant"; | |
| 18 | 40 | export default { | 
| 19 | 41 | data() { | 
| 20 | - return { arr: 0 }; | |
| 21 | - }, | |
| 22 | - computed: { | |
| 23 | - videopic() { | |
| 24 | - return sessionStorage.getItem("videopic"); | |
| 25 | - }, | |
| 42 | + return { arr: 0, modelList: [] ,background: ''}; | |
| 26 | 43 | }, | 
| 27 | 44 | methods: { | 
| 28 | 45 | //获取数据 | 
| 29 | - getTable() {}, | |
| 46 | + getTable() { | |
| 47 | + this.yxAxios | |
| 48 | + .post(`${this.dataUrl}/sys/yx/getConsultDetail`, { | |
| 49 | + id: this.$route.query.dataId, | |
| 50 | + }) | |
| 51 | + .then((res) => { | |
| 52 | + if (res.data.success) { | |
| 53 | + if (!res.data.data.background) { | |
| 54 | + this.background = res.data.data.imgUrl; | |
| 55 | + }else { | |
| 56 | + this.background = res.data.data.background; | |
| 57 | + } | |
| 58 | + let arr = JSON.parse(res.data.data.modelList); | |
| 59 | + this.modelList = arr; | |
| 60 | + } else { | |
| 61 | + this.$message.warning(res.data.message); | |
| 62 | + } | |
| 63 | + }); | |
| 64 | + }, | |
| 65 | + //打开图片 | |
| 66 | + openImg(x, y, v) { | |
| 67 | + let imgList = v.imgList.map((v) => v.response); | |
| 68 | + | |
| 69 | + ImagePreview({ | |
| 70 | + images: imgList, | |
| 71 | + startPosition: y, | |
| 72 | + }); | |
| 73 | + }, | |
| 74 | + //添加浏览量 | |
| 75 | + addReadNum() { | |
| 76 | + this.yxAxios | |
| 77 | + .post(`${this.dataUrl}/sys/yx/updateRead`, { | |
| 78 | + id: this.$route.query.dataId, | |
| 79 | + }) | |
| 80 | + .then((res) => { | |
| 81 | + if(res.data.success) { | |
| 82 | + console.log('阅读量成功') | |
| 83 | + }else { | |
| 84 | + console.log('阅读量失败') | |
| 85 | + } | |
| 86 | + }) | |
| 87 | + } | |
| 30 | 88 | }, | 
| 31 | 89 | mounted() { | 
| 32 | 90 | this.getTable(); | 
| 91 | + this.addReadNum(); | |
| 33 | 92 | }, | 
| 34 | 93 | }; | 
| 35 | 94 | </script> | 
| 36 | 95 | |
| 37 | 96 | <style lang="scss" scoped> | 
| 38 | -.box_pic { | |
| 39 | - width: 100%; | |
| 40 | - height: 364px; | |
| 41 | - background-color: #999; | |
| 97 | +.box { | |
| 98 | + background-color: #f5f6fa; | |
| 99 | + min-height: 100vh; | |
| 42 | 100 | |
| 43 | - img { | |
| 101 | + .box_pic { | |
| 44 | 102 | width: 100%; | 
| 45 | - height: 100%; | |
| 46 | - } | |
| 47 | -} | |
| 48 | -.article { | |
| 49 | - padding: 48px 30px; | |
| 50 | - | |
| 51 | - .article_title { | |
| 52 | - color: #333; | |
| 53 | - font-size: 44px; | |
| 54 | - font-weight: bold; | |
| 55 | - display: -webkit-box; | |
| 56 | - -webkit-box-orient: vertical; | |
| 57 | - -webkit-line-clamp: 2; //限制行数 | |
| 58 | - overflow: hidden; //超出部分隐藏 | |
| 59 | - text-overflow: ellipsis; //用一个省略号代替超出的内容 | |
| 60 | - } | |
| 61 | - .article_time { | |
| 62 | - margin: 22px 0 44px; | |
| 63 | - color: #999; | |
| 64 | - font-size: 24px; | |
| 65 | - } | |
| 66 | - .article_con { | |
| 67 | - font-size: 32px; | |
| 103 | + height: 364px; | |
| 104 | + background-color: #999; | |
| 105 | + | |
| 106 | + img { | |
| 107 | + width: 100%; | |
| 108 | + height: 100%; | |
| 109 | + } | |
| 68 | 110 | } | 
| 69 | -} | |
| 70 | -.videoCss { | |
| 71 | - width: 100vw; | |
| 72 | 111 | |
| 73 | - video { | |
| 74 | - width: 100%; | |
| 112 | + .contextCss { | |
| 113 | + width: 90vw; | |
| 114 | + position: absolute; | |
| 115 | + top: 300px; | |
| 116 | + left: 5vw; | |
| 117 | + border-radius: 5vw; | |
| 118 | + background-color: #fff; | |
| 119 | + padding: 3vw; | |
| 120 | + box-sizing: border-box; | |
| 121 | + box-shadow: 1px 1px 1px 1px rgb(221, 220, 220); | |
| 122 | + | |
| 123 | + .modelBox { | |
| 124 | + margin: 3vw; | |
| 125 | + display: flex; | |
| 126 | + justify-content: center; | |
| 127 | + flex-wrap: wrap; | |
| 128 | + | |
| 129 | + .titleCss { | |
| 130 | + width: 60vw; | |
| 131 | + padding: 3.5vw; | |
| 132 | + box-sizing: border-box; | |
| 133 | + font-size: 4.6vw; | |
| 134 | + font-weight: bold; | |
| 135 | + background-image: url("../../assets/blue_title.png"); | |
| 136 | + -moz-background-size: 100% 100%; | |
| 137 | + background-size: 100% 100%; | |
| 138 | + text-align: center; | |
| 139 | + margin-bottom: 5vw; | |
| 140 | + } | |
| 141 | + | |
| 142 | + .typeOne { | |
| 143 | + margin: 5vw; | |
| 144 | + | |
| 145 | + .pic { | |
| 146 | + width: 70vw; | |
| 147 | + height: 45vw; | |
| 148 | + margin-bottom: 5vw; | |
| 149 | + | |
| 150 | + img { | |
| 151 | + width: 100%; | |
| 152 | + height: 100%; | |
| 153 | + } | |
| 154 | + } | |
| 155 | + } | |
| 156 | + .typeTwo { | |
| 157 | + margin: 5vw; | |
| 158 | + | |
| 159 | + .videoTwo { | |
| 160 | + width: 70vw; | |
| 161 | + height: 45vw; | |
| 162 | + margin-bottom: 5vw; | |
| 163 | + | |
| 164 | + video { | |
| 165 | + width: 100%; | |
| 166 | + height: 100%; | |
| 167 | + } | |
| 168 | + } | |
| 169 | + } | |
| 170 | + .typeThree { | |
| 171 | + margin: 5vw; | |
| 172 | + | |
| 173 | + .contextThree { | |
| 174 | + width: 70vw; | |
| 175 | + margin-bottom: 5vw; | |
| 176 | + font-size: 4.5vw; | |
| 177 | + overflow: auto; | |
| 178 | + | |
| 179 | + ::v-deep img { | |
| 180 | + max-width: 60vw !important; | |
| 181 | + height: 50vw; | |
| 182 | + } | |
| 183 | + } | |
| 184 | + } | |
| 185 | + } | |
| 75 | 186 | } | 
| 76 | 187 | } | 
| 77 | 188 | </style> | 
| 78 | 189 | \ No newline at end of file | ... | ... | 
