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 | import Vue from 'vue' | 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 | import App from './App.vue' | 3 | import App from './App.vue' |
4 | import router from './router' | 4 | import router from './router' |
5 | import store from './store' | 5 | import store from './store' |
@@ -8,9 +8,10 @@ import Moment from 'moment' | @@ -8,9 +8,10 @@ import Moment from 'moment' | ||
8 | Vue.prototype.Moment = Moment; | 8 | Vue.prototype.Moment = Moment; |
9 | 9 | ||
10 | // Vue.prototype.yanxueUrl = 'https://yanxue.myjxt.com'; | 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 | import { mgop } from '@aligov/jssdk-mgop'; | 16 | import { mgop } from '@aligov/jssdk-mgop'; |
16 | Vue.prototype.mgop = mgop; | 17 | Vue.prototype.mgop = mgop; |
@@ -51,6 +52,7 @@ Vue | @@ -51,6 +52,7 @@ Vue | ||
51 | .use(PullRefresh) | 52 | .use(PullRefresh) |
52 | .use(RadioGroup) | 53 | .use(RadioGroup) |
53 | .use(Cascader) | 54 | .use(Cascader) |
55 | + .use(ImagePreview) | ||
54 | .use(Radio); | 56 | .use(Radio); |
55 | Vue.config.productionTip = false; | 57 | Vue.config.productionTip = false; |
56 | Vue.config.ignoredElements = ['wx-open-launch-app']; | 58 | Vue.config.ignoredElements = ['wx-open-launch-app']; |
src/views/Yanxue/achievementsOne.vue
@@ -7,31 +7,29 @@ | @@ -7,31 +7,29 @@ | ||
7 | <van-tab title="研学旅行"></van-tab> | 7 | <van-tab title="研学旅行"></van-tab> |
8 | </van-tabs> --> | 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 | <div class="art_bot"> | 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 | </div> | 23 | </div> |
28 | </div> | 24 | </div> |
29 | <div class="art_pic"> | 25 | <div class="art_pic"> |
30 | - <img :src="v.imgpic" /> | 26 | + <img :src="v.imgUrl" /> |
31 | </div> | 27 | </div> |
32 | </div> | 28 | </div> |
33 | </div> | 29 | </div> |
34 | 30 | ||
31 | + <van-empty description="暂无数据" v-else/> | ||
32 | + | ||
35 | <div class="imgPic" @click="toChoose"> | 33 | <div class="imgPic" @click="toChoose"> |
36 | <img src="@/assets/changeSchool.png" /> | 34 | <img src="@/assets/changeSchool.png" /> |
37 | </div> | 35 | </div> |
@@ -47,154 +45,37 @@ export default { | @@ -47,154 +45,37 @@ export default { | ||
47 | data() { | 45 | data() { |
48 | return { | 46 | return { |
49 | tabsName: 1, | 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 | newsList: [], | 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 | methods: { | 51 | methods: { |
187 | //详情新闻 | 52 | //详情新闻 |
188 | toDetails(v) { | 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 | toChoose() { | 57 | toChoose() { |
195 | this.$router.push({ name: "chooseSchoolOne" }); | 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 | </script> | 80 | </script> |
200 | 81 |
src/views/Yanxue/chooseSchoolOne.vue
@@ -24,37 +24,43 @@ export default { | @@ -24,37 +24,43 @@ export default { | ||
24 | data() { | 24 | data() { |
25 | return { | 25 | return { |
26 | tabsName: 0, | 26 | tabsName: 0, |
27 | - schoolList: [ | ||
28 | - { schoolName: "柯桥区实验小学" }, | ||
29 | - { schoolName: "柯桥区中国轻纺城小学" }, | ||
30 | - ], | 27 | + schoolList: [], |
31 | }; | 28 | }; |
32 | }, | 29 | }, |
33 | watch: { | 30 | watch: { |
34 | tabsName(val) { | 31 | tabsName(val) { |
35 | - console.log(val); | ||
36 | this.schoolList = []; | 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 | methods: { | 36 | methods: { |
46 | toActive(v) { | 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 | tabsChange() {}, | 44 | tabsChange() {}, |
51 | getList() { | 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 | </script> | 65 | </script> |
60 | 66 |
src/views/Yanxue/pageDetails.vue
1 | <template> | 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 | </div> | 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 | </div> | 34 | </div> |
14 | </div> | 35 | </div> |
15 | </template> | 36 | </template> |
16 | 37 | ||
17 | <script> | 38 | <script> |
39 | +import { ImagePreview } from "vant"; | ||
18 | export default { | 40 | export default { |
19 | data() { | 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 | methods: { | 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 | mounted() { | 89 | mounted() { |
32 | this.getTable(); | 90 | this.getTable(); |
91 | + this.addReadNum(); | ||
33 | }, | 92 | }, |
34 | }; | 93 | }; |
35 | </script> | 94 | </script> |
36 | 95 | ||
37 | <style lang="scss" scoped> | 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 | width: 100%; | 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 | </style> | 188 | </style> |
78 | \ No newline at end of file | 189 | \ No newline at end of file |