作者 mxd

课程表

1 <template> 1 <template>
2 <view class="twoCurriculum"> 2 <view class="twoCurriculum">
3 <!-- 课程表 --> 3 <!-- 课程表 -->
4 - <view class="header-wrap">  
5 - <view class="tabs-wrap area flex">  
6 - <view :class="current==index?'tabs-active':''" v-for="(item,index) in tabs" :key="index"  
7 - @tap="tabsClick(item,index)">  
8 - {{item.title}}  
9 - </view> 4 + <view class="tabs-wrap flex">
  5 + <view class="tabs-item" :class="current==index?'tabs-active':''" v-for="(item,index) in tabs" :key="index"
  6 + @tap="tabsClick(item,index)">
  7 + {{item.title}}
10 </view> 8 </view>
11 </view> 9 </view>
12 10
13 <view class="wrap area flex"> 11 <view class="wrap area flex">
14 <view class="civil_tabs flex" v-if="tabs[current].list&&tabs[current].list.length>0"> 12 <view class="civil_tabs flex" v-if="tabs[current].list&&tabs[current].list.length>0">
15 - <view :class="current2==index?'civil_tabs_active':'civil_tabs_item'" 13 + <view class="civil_tabs_item" :class="current2==index?'civil_tabs_active':''"
16 v-for="(item,index) in tabs[current].list" :key="index" @tap="civilTabsClick(item,index,'current2')"> 14 v-for="(item,index) in tabs[current].list" :key="index" @tap="civilTabsClick(item,index,'current2')">
17 {{item.title}} 15 {{item.title}}
18 </view> 16 </view>
@@ -29,7 +27,8 @@ @@ -29,7 +27,8 @@
29 </swiper> 27 </swiper>
30 28
31 <view class="btn-wrap" > 29 <view class="btn-wrap" >
32 - <!-- 点击查看大图 -->左右滑动查看 30 + <!-- 点击查看大图 -->
  31 + 左右滑动查看
33 </view> 32 </view>
34 </view> 33 </view>
35 </view> 34 </view>
@@ -181,36 +180,42 @@ @@ -181,36 +180,42 @@
181 } 180 }
182 181
183 .tabs-wrap { 182 .tabs-wrap {
184 - height: 76rpx; 183 + height: 88rpx;
185 justify-content: space-around; 184 justify-content: space-around;
186 align-items: center; 185 align-items: center;
187 - font-size: 32rpx; 186 + font-size: 28rpx;
188 font-family: PingFang SC; 187 font-family: PingFang SC;
189 font-weight: 500; 188 font-weight: 500;
190 - color: rgba(255, 255, 255, 0.7);  
191 - 189 + color: #323232;
  190 + background-color: #fff;
  191 + border-top:1rpx solid #f3f4f6;
  192 + .tabs-item {
  193 + height: 100%;
  194 + display: flex;
  195 + align-items: center;
  196 + }
192 .tabs-active { 197 .tabs-active {
193 - color: #FFFFFF; 198 + color: #2D81FF;
194 position: relative; 199 position: relative;
195 } 200 }
196 - 201 +
197 .tabs-active::after { 202 .tabs-active::after {
198 content: ''; 203 content: '';
199 - width: 38rpx;  
200 - height: 6rpx;  
201 - background: #FFFFFF;  
202 - border-radius: 4rpx;  
203 position: absolute; 204 position: absolute;
204 - bottom: -18rpx;  
205 left: 50%; 205 left: 50%;
  206 + bottom: 0rpx;
206 transform: translate(-50%, 0); 207 transform: translate(-50%, 0);
  208 + background-image: url(@/static/imagesV2/icon23.png);
  209 + background-size: 100% 100%;
  210 + height: 24rpx;
  211 + width: 24rpx;
207 } 212 }
208 } 213 }
209 - 214 +
210 .wrap { 215 .wrap {
211 min-height: 1152rpx; 216 min-height: 1152rpx;
212 background: #FFFFFF; 217 background: #FFFFFF;
213 - border-radius: 10rpx; 218 + border-radius: 20rpx;
214 padding-bottom: 20rpx; 219 padding-bottom: 20rpx;
215 position: absolute; 220 position: absolute;
216 top: 120rpx; 221 top: 120rpx;
@@ -247,33 +252,35 @@ @@ -247,33 +252,35 @@
247 252
248 .civil_tabs { 253 .civil_tabs {
249 width: 100%; 254 width: 100%;
250 - height: 100rpx;  
251 - font-size: 32rpx;  
252 - color: #999999;  
253 - border-radius: 10rpx;  
254 - background-image: linear-gradient(#D1EDFF 0%, #fff 100%);  
255 justify-content: space-around; 255 justify-content: space-around;
256 align-items: center; 256 align-items: center;
257 -  
258 - .civil_tabs_item {} 257 + padding: 30rpx 0;
  258 + .civil_tabs_item {
  259 + font-size: 26rpx;
  260 + font-family: PingFang SC;
  261 + font-weight: 500;
  262 + color: #646464;
  263 + padding: 20rpx 60rpx;
  264 + }
259 265
260 .civil_tabs_active { 266 .civil_tabs_active {
261 - color: #0097FF;  
262 - opacity: 0.9; 267 + color: #2D81FF;
263 position: relative; 268 position: relative;
  269 + background: rgba(45, 129, 255, 0.1);
  270 + border-radius: 32px;
264 } 271 }
265 272
266 - .civil_tabs_active::after {  
267 - content: '';  
268 - width: 50rpx;  
269 - height: 8rpx;  
270 - background-color: #0F9CFF;  
271 - opacity: 0.9;  
272 - border-radius: 6rpx;  
273 - position: absolute;  
274 - bottom: -18rpx;  
275 - left: 50%;  
276 - transform: translate(-50%, 0);  
277 - } 273 + // .civil_tabs_active::after {
  274 + // content: '';
  275 + // width: 50rpx;
  276 + // height: 8rpx;
  277 + // background-color: #0F9CFF;
  278 + // opacity: 0.9;
  279 + // border-radius: 6rpx;
  280 + // position: absolute;
  281 + // bottom: -18rpx;
  282 + // left: 50%;
  283 + // transform: translate(-50%, 0);
  284 + // }
278 } 285 }
279 </style> 286 </style>