<template>
<view class="tab-list-container">
<!-- 顶部 -->
<view class="tab-list">
<view @click="changeTab(1)" class="tab-item" :class='activeTab === 1 ? "active" : ""'>人气排行榜</view>
<view @click="changeTab(2)" class="tab-item" :class='activeTab === 2 ? "active" : ""'>为你找机</view>
</view>
<!-- 内容 -->
<view class="tab-content">
<view class="tab-1" v-show='activeTab === 1'>
<view>每天06:00更新</view>
<view v-for='(item, index ) in tabGoodsList' :key='index'>
<view class="goods-pic"></view>
<view>挖机产品名称型号型号型号型号型号型号</view>
<view class="info">
<view>2013年</view>
<view class="price">28.8万</view>
</view>
</view>
</view>
<view class="tab-2" v-show='activeTab === 2'>
</view>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
const tabGoodsList = ref([])
const activeTab = ref(1)
const changeTab = (value) => {
activeTab.value = value
}
</script>
<style lang="scss" scoped>
.tab-list-container {
background-color: #fff;
margin: 24rpx 0;
padding-left: 24rpx;
padding-right: 24rpx;
}
.tab-list {
display: flex;
font-size: 26rpx;
color: #004;
column-gap: 24rpx;
.tab-item {
position: relative;
padding-bottom: 20rpx;
}
}
// 这里没有生效
.tab-item ::after {
position: absolute;
left: 0;
bottom: 0;
background-color: red;
height: 4rpx;
width: 100%;
}
</style>
![1***@qq.com](https://img-cdn-tc.dcloud.net.cn/account/identicon/6f89a8ef313add367fa488074f20ff7b.png)
- 发布:2023-08-22 18:12
- 更新:2023-08-23 09:17
- 阅读:298
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: window10
HBuilderX类型: 正式
HBuilderX版本号: 3.8.12
浏览器平台: Edge
浏览器版本: 115.0.1901.203 (正式版本) (64 位)
项目创建方式: HBuilderX
示例代码:
操作步骤:
创建一个页面,直接运行上面的代码,审查元素即可
创建一个页面,直接运行上面的代码,审查元素即可
预期结果:
期望有伪元素出现
期望有伪元素出现
实际结果:
实际没有。
实际没有。
1***@qq.com (作者)
感谢 感谢, 我中午睡醒后,发现字体文件是可用的,一对比,是 content 没有写导致的。 我的问题
2023-08-23 14:08