|
|
@@ -53,7 +53,8 @@
|
|
|
<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
|
|
|
<view v-for="(tag, idx) in videoTags" :key="idx" class="tag-item"
|
|
|
:class="{ active: videoTagId === tag.cateId }" @click="handleSelectOneType(tag)">
|
|
|
- <text>{{ tag.cateName }}</text>
|
|
|
+ <text>{{ tag.cateName }}</text>
|
|
|
+ <view v-if="videoTagId === tag.cateId" class="triangle"></view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
<template v-if="oneCourseListData.length >0">
|
|
|
@@ -479,11 +480,13 @@
|
|
|
|
|
|
/* 横向标签 */
|
|
|
.tag-scroll {
|
|
|
+ height: 80rpx;
|
|
|
white-space: nowrap;
|
|
|
- margin-bottom: 22rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
.tag-item {
|
|
|
+ position: relative;
|
|
|
display: inline-block;
|
|
|
padding: 6rpx 24rpx;
|
|
|
margin-right: 24rpx;
|
|
|
@@ -502,6 +505,20 @@
|
|
|
background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
|
|
|
}
|
|
|
|
|
|
+ /* 底部小三角核心 */
|
|
|
+ .triangle {
|
|
|
+ z-index: 10;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ bottom: -5px;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-left: 30rpx solid transparent;
|
|
|
+ border-right: 30rpx solid transparent;
|
|
|
+ border-top: 20rpx solid #FF233C;
|
|
|
+ }
|
|
|
+
|
|
|
.tag-item.active text {
|
|
|
color: #fff;
|
|
|
}
|
wenxingxing