mokao.vue
5.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<template>
<div class="container">
<headers></headers>
<right></right>
<scrollpage></scrollpage>
<div class="w box_sizing width_box my_wrap">
<div class="left_position">
<left></left>
</div>
<div class="banner_detail box_sizing">
<div class="mokaoP box_sizing">全项模考</div>
<div class="flex-warp box_sizing flex-warp pics" @click="toMokaoList(1, '仿真模考')">
<img src="../assets/images/mo1.png" alt="" class="pic">
<div class="pictext box_sizing">
<div class="pictitle">仿真模考</div>
<div class="pictip">Simulation test</div>
</div>
</div>
<div class="mokaoP box_sizing">专项模考</div>
<div class="flex-warp box_sizing flex_box pics" >
<div class="flex_box " style="position: relative;" @click="toMokaoList(2, '听力模考')">
<img src="../assets/images/mo2.png" alt="" class="pic">
<div class="pictext box_sizing" style="top: 0;">
<div class="pictitle">听力模考</div>
<div class="pictip">Listening simulation test</div>
</div>
</div>
<div class="flex_box " style="position: relative;" @click="toMokaoList(3, '阅读模考')">
<img src="../assets/images/mo2.png" alt="" class="pic">
<div class="pictext box_sizing" style="top: 0;">
<div class="pictitle">阅读模考</div>
<div class="pictip">Reading simulation test</div>
</div>
</div>
<div class="flex_box " style="position: relative;" @click="toMokaoList(4, '口语模考')">
<img src="../assets/images/mo2.png" alt="" class="pic">
<div class="pictext box_sizing" style="top: 0;">
<div class="pictitle">口语模考</div>
<div class="pictip">Speaking simulation test</div>
</div>
</div>
<div class="flex_box " style="position: relative;" @click="toMokaoList(5, '写作模考')">
<img src="../assets/images/mo2.png" alt="" class="pic">
<div class="pictext box_sizing" style="top: 0;">
<div class="pictitle">写作模考</div>
<div class="pictip">Writing simulation test</div>
</div>
</div>
</div>
<div class="mokaoP box_sizing">会员模考</div>
<div class="flex-warp box_sizing flex-warp pics" @click="toMokaoList(6, '高频仿真模考')">
<img src="../assets/images/mo6.png" alt="" class="pic">
<div class="pictext box_sizing">
<div class="pictitle">高频仿真模考</div>
<div class="pictip" style="width: 123px;">High frequency simulation test</div>
</div>
</div>
</div>
</div>
<footers></footers>
</div>
</template>
<script>
import headers from "@/components/headers";
import footers from "@/components/footders";
import left from "@/components/left";
import right from "@/components/right";
import scrollpage from "@/components/scrollpage";
var _this;
export default {
components: {
headers,
footers,
left,
right,
scrollpage,
},
data() {
return {
mokao:[
{name:"听力模考",tip:"Listening simulation test",image:require("../assets/images/mo2.png")},
{name:"阅读模考",tip:"Reading simulation test",image:require("../assets/images/mo3.png")},
{name:"口语模考",tip:"Speaking simulation test",image:require("../assets/images/mo4.png")},
{name:"写作模考",tip:"Writing simulation test",image:require("../assets/images/mo5.png")}
],
}
},
created() {
_this = this;
},
mounted() {
},
methods: {
toMokaoList(id, name){
_this.$router.push({
path: './mokaoList',
query: {
id: id,
name: name
}
})
}
}
}
</script>
<style>
.banner_detail {
width: 100%;
padding: 34px 35px;
border-radius: 20px;
background: rgba(255, 255, 255, 1);
}
.mokaoP{
text-align: left;
font-size: 20px;
font-weight: bold;
line-height: 44px;
color: #06121E;
padding: 19px 0;
position: relative;
}
.mokaoP:after{
content: '';
width: 40px;
height: 0px;
border: 1px solid #B90038;
opacity: 1;
position: absolute;
top: 100%;
left: 0;
}
.pics{
padding-top: 34px;
position: relative;
}
.pic{
width:336px;
height: 112px;
margin-right: 20px;
margin-bottom: 20px;
}
.pictext{
width:336px;
height: 112px;
margin-right: 20px;
margin-bottom: 20px;
position: absolute;
top: 34px;
left: 0;
color: #ffffff;
padding: 20px 28px;
text-align: left;
}
.pictitle{
font-size: 24px;
font-weight: 600;
line-height: 33px;
color: #FFFFFF;
}
.pictip{
font-size: 16px;
font-family: Poppins;
font-weight: 500;
color: #FFFFFF;
margin-top: 11px;
}
</style>