192 lines
4.6 KiB
Vue
192 lines
4.6 KiB
Vue
<script setup>
|
||
import { ref, reactive } from 'vue'
|
||
|
||
const topNav = ref([
|
||
{ name: '全部', id: '1' },
|
||
{ name: '好评(54)', id: '2' },
|
||
{ name: '差评(43)', id: '3' },
|
||
{ name: '有图(23)', id: '4' }
|
||
])
|
||
|
||
const formData = reactive({
|
||
type: '1'
|
||
})
|
||
|
||
const onTop = id => {
|
||
formData.type = id
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="comment-box">
|
||
<view class="top-options">
|
||
<view
|
||
v-for="(item, index) in topNav"
|
||
:key="index"
|
||
:class="{ active: item.id === formData.type }"
|
||
class="text"
|
||
@click="onTop(item.id)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 卡片位置 -->
|
||
<view class="card-box">
|
||
<image
|
||
src="/static/images/public/random1.png"
|
||
mode="scaleToFill"
|
||
class="avatar"
|
||
></image>
|
||
<!-- 右边 -->
|
||
<view class="right-box">
|
||
<text class="name">名字</text>
|
||
<view class="rate-box">
|
||
<view class="date">
|
||
<text>2022-2-2</text>
|
||
<text>重庆市</text>
|
||
</view>
|
||
<view class="star">
|
||
<view class="like">
|
||
<uni-icons
|
||
type="hand-up"
|
||
size="16"
|
||
color="#74747480"
|
||
></uni-icons>
|
||
22
|
||
</view>
|
||
<uni-icons
|
||
type="chat"
|
||
size="16"
|
||
color="#74747480"
|
||
></uni-icons>
|
||
</view>
|
||
</view>
|
||
<text class="content">
|
||
视频讲的真好，全面升级，讲的真的全面，老师 徒弟吗？
|
||
</text>
|
||
<view class="img-box">
|
||
<image
|
||
v-for="item in 5"
|
||
src="/static/images/public/random1.png"
|
||
mode="scaleToFill"
|
||
class="bottom-img"
|
||
></image>
|
||
</view>
|
||
<view class="bottom-content">
|
||
<view class="name-box">
|
||
<text>名字：</text>
|
||
<text>内容</text>
|
||
</view>
|
||
<text class="expand">共三条回复></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
// @import './styles/public.scss';
|
||
@import '@/styles/top-selector.scss';
|
||
.comment-box {
|
||
padding: 32rpx 24rpx;
|
||
.card-box {
|
||
margin-top: 36rpx;
|
||
display: flex;
|
||
.avatar {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
flex-shrink: 0;
|
||
margin-right: 16rpx;
|
||
}
|
||
.right-box {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
.name {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
.rate-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 10rpx 0 20rpx;
|
||
.date {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #74747480;
|
||
text {
|
||
&:first-child {
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.star {
|
||
display: flex;
|
||
align-items: center;
|
||
.like {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #74747480;
|
||
margin-right: 86rpx;
|
||
}
|
||
}
|
||
}
|
||
.content {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
.img-box {
|
||
margin-top: 16rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
grid-gap: 16rpx;
|
||
.bottom-img {
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
}
|
||
}
|
||
.bottom-content {
|
||
margin-top: 32rpx;
|
||
background: #f9f9f9;
|
||
border-radius: 8rpx;
|
||
padding: 0 16rpx 16rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
.name-box {
|
||
margin-top: 16rpx;
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
&:last-child {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
.expand {
|
||
display: block;
|
||
margin-top: 14rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #00d993;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|