正在显示
1 个修改的文件
包含
49 行增加
和
42 行删除
| 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> |
-
请 注册 或 登录 后发表评论