fix:二手车页面
CHINAMI-3V5PQ9A\Administrator
parent
27757417f9
commit
f842d79894
|
|
@ -113,6 +113,15 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/circle/views/UsedDetails/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom",
|
||||
"disableScroll": true
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
|
@ -126,13 +135,13 @@
|
|||
"iconPath": "static/tabs/sel.png",
|
||||
"selectedIconPath": "static/tabs/sel-select.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/mall/mall",
|
||||
"text": "商城",
|
||||
"iconPath": "static/tabs/mall.png",
|
||||
"selectedIconPath": "static/tabs/mall-select.png"
|
||||
// {
|
||||
// "pagePath": "pages/mall/mall",
|
||||
// "text": "商城",
|
||||
// "iconPath": "static/tabs/mall.png",
|
||||
// "selectedIconPath": "static/tabs/mall-select.png"
|
||||
|
||||
},
|
||||
// },
|
||||
{
|
||||
"pagePath": "pages/IMB/IMB",
|
||||
"text": "IMOBAO",
|
||||
|
|
|
|||
|
|
@ -4,33 +4,39 @@
|
|||
|
||||
</view>
|
||||
<view class="car-list">
|
||||
<view class=" car-list-item">
|
||||
<view class=" car-list-item" v-for="(item,index) in dataresource" :key="index">
|
||||
<image
|
||||
src="https://tse2-mm.cn.bing.net/th/id/OIP-C.QbUp_t4u2fqk5-hxFUdlbQHaFj?w=229&h=180&c=7&r=0&o=5&pid=1.7"
|
||||
mode="scaleToFill" class="car-photo"></image>
|
||||
<text class="introduce">YAMAHA雅马哈摩托车</text>
|
||||
<view class="tag">
|
||||
<view class="tag-left">
|
||||
<text>铃木DL1050</text>
|
||||
<view class="item-bottom">
|
||||
<text class="introduce">YAMAHA雅马哈摩托车，需要电话都不回复</text>
|
||||
<view class="tag">
|
||||
<view class="tag-left">
|
||||
<text>铃木DL1050</text>
|
||||
</view>
|
||||
<view class="tag-right">
|
||||
<text>使用一年以下</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tag-right">
|
||||
<text>使用一年以下</text>
|
||||
<view class="price-view">
|
||||
<view class="price-view-left">
|
||||
<view>
|
||||
<text class="symbol">￥</text>
|
||||
<text>888.8</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="price-view-right">
|
||||
<text>731人看过</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-view">
|
||||
<view class="price-view-left">
|
||||
<text>￥888.8</text>
|
||||
</view>
|
||||
<view class="price-view-right">
|
||||
<text>731人看过</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user">
|
||||
<image
|
||||
src="https://tse4-mm.cn.bing.net/th/id/OIP-C.bye37g-ULgz6dzKsvQtl9gAAAA?w=216&h=216&c=7&r=0&o=5&pid=1.7"
|
||||
mode="aspectFit" class="avatar"></image>
|
||||
<view class="price-view-right">
|
||||
<text>港湾晚风</text>
|
||||
<view class="user">
|
||||
<image
|
||||
src="https://tse4-mm.cn.bing.net/th/id/OIP-C.bye37g-ULgz6dzKsvQtl9gAAAA?w=216&h=216&c=7&r=0&o=5&pid=1.7"
|
||||
mode="aspectFit" class="avatar"></image>
|
||||
<view class="price-view-right">
|
||||
<text>港湾晚风</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -38,17 +44,9 @@
|
|||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
const dataresource = ref([{}, {}, {}, {}, {}, {}, {}, {}])
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
|
|
@ -59,28 +57,97 @@
|
|||
.container {
|
||||
background-color: #f8f9fd;
|
||||
height: 100%;
|
||||
padding: 20rpx 24rpx;
|
||||
|
||||
|
||||
.car-list {
|
||||
padding: 20rpx 24rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.car-list-item {
|
||||
width: 340rpx;
|
||||
width: 48.5%;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
margin-bottom: 25rpx;
|
||||
|
||||
.car-photo {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.introduce {
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.item-bottom {
|
||||
padding: 20rpx 16rpx;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
.introduce {
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
user-select: text;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 12rpx 0;
|
||||
|
||||
.tag-left,
|
||||
.tag-right {
|
||||
padding: 8rpx;
|
||||
font-size: 20rpx;
|
||||
border: 1rpx solid #86898C;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8rpx;
|
||||
color: #565960;
|
||||
}
|
||||
|
||||
.tag-left {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.price-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.price-view-left {
|
||||
color: #FF4400;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.symbol {
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.price-view-right {
|
||||
font-size: 20rpx;
|
||||
color: #86898C;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #86898C;
|
||||
|
||||
.avatar {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="article">
|
||||
<view class="article-item" v-for="(item,index) in dataResource" :key="index">
|
||||
<view class="article-item" v-for="(item,index) in dataResource" :key="index"
|
||||
@click="goBack('/pages/circle/views/details/details',1)">
|
||||
<view class="article-item-head">
|
||||
<view class="article-item-head-left">
|
||||
<image src="../../../static/mine/lv1.png" mode="" class="avatar"></image>
|
||||
|
|
@ -117,7 +118,8 @@
|
|||
const dataResource = ref<string[]>()
|
||||
const {
|
||||
handPreviewImage,
|
||||
eventsItem
|
||||
eventsItem,
|
||||
goBack
|
||||
} = userData()
|
||||
interface Props {
|
||||
resource : string[]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,556 @@
|
|||
<template>
|
||||
<view class="container" :style="{paddingTop:menuButtonTop+'rpx'}">
|
||||
<uni-nav-bar class="nav-bar">
|
||||
<view class="text">车辆详情</view>
|
||||
<template v-slot:left>
|
||||
<image src="../../../../static/common/back.png" mode="aspectFit" class="image" @click="goBack('',3)">
|
||||
</image>
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
<view class="details-main">
|
||||
<view class="article-content">
|
||||
<view class="article-item-head">
|
||||
<view class="article-item-head-left">
|
||||
<image
|
||||
src="https://pica.zhimg.com/80/v2-6606555d10fd91e4b9b581f841fab966_720w.webp?source=1def8aca"
|
||||
mode="aspectFit" class="avatar"></image>
|
||||
<view class="article-item-head-center">
|
||||
<view class="center-head">
|
||||
<text class="center-head-name">金卡纳练习会</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="article-item-head-right">
|
||||
<text>关注</text>
|
||||
</view>
|
||||
</view>
|
||||
<swiper :indicator-dots="true" circular current="1" :autoplay="false" :interval="3000" :duration="500"
|
||||
class="details-swiper">
|
||||
<swiper-item>
|
||||
<image
|
||||
src="https://tse3-mm.cn.bing.net/th/id/OIP-C.yVYo22pJ8EAsvJE0WqRLRAHaE8?w=274&h=183&c=7&r=0&o=5&pid=1.7"
|
||||
mode="scaleToFill" class="image"
|
||||
@click="handPreviewImage(['https://ts1.cn.mm.bing.net/th?id=OIP-C.7pldmOaHsIlsAGsWmA4SawHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'])">
|
||||
</image>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image
|
||||
src="https://tse1-mm.cn.bing.net/th/id/OIP-C.h8raKuvEGreuUAexOGURRQHaEf?w=297&h=180&c=7&r=0&o=5&pid=1.7"
|
||||
mode="scaleToFill" class="image"
|
||||
@click="handPreviewImage(['https://pica.zhimg.com/80/v2-6606555d10fd91e4b9b581f841fab966_720w.webp?source=1def8aca'])">
|
||||
</image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="article-item-content">
|
||||
<view class="article-item-content-title">
|
||||
<view class="price-view">
|
||||
<view class="price-view-left">
|
||||
<text>￥</text>
|
||||
<view class="price">
|
||||
1888.88
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-view-right">
|
||||
<text>12人私信过</text>
|
||||
<text>200人看过</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="carInfo">
|
||||
<text class="carName">CFMOTO春风 250SR-FUN 摩托车</text>
|
||||
<view class="car-argument">
|
||||
<view class="car-argument-brand">
|
||||
<text>品牌</text>
|
||||
<text class="data">春风/CFMOTO</text>
|
||||
</view>
|
||||
<view class="car-argument-time">
|
||||
<text>首次上牌时间</text>
|
||||
<text class="data">2023/02/12</text>
|
||||
</view>
|
||||
<view class="car-argument-kilometre">
|
||||
<text>公里数</text>
|
||||
<text class="data">6.6km</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="article-item-address">
|
||||
<image src="../../../../static/common/icon-address.png" mode="aspectFill" class="image">
|
||||
</image>
|
||||
<text>四川省成都市青龙湖湿地公园</text>
|
||||
</view>
|
||||
<view class="car-describe">
|
||||
<text>这车减震偏硬，反光镜震动大视野小，看不清后面情况，喇叭按纽设计位置不对，按下双闪，然后按转向灯，转向不起作用，必须关掉双闪，麻烦，其他车不是这个样，仪表显示屏，打开灯光开关，这是设计缺陷吗，才骑了300公里，亲自感受。</text>
|
||||
</view>
|
||||
<view class="article-item-time">
|
||||
<text>2023/03/12 12:00发布</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="details-main-review">
|
||||
<view class="details-main-review-title">
|
||||
<text>全部评论 (22)</text>
|
||||
<text class="more">更多<uni-icons type="right" size="12"></uni-icons></text>
|
||||
</view>
|
||||
<view class="details-main-review-list">
|
||||
<view class="review-item">
|
||||
<view class="review-item-head">
|
||||
<view class="review-item-head-left">
|
||||
<image
|
||||
src="https://pica.zhimg.com/80/v2-6606555d10fd91e4b9b581f841fab966_720w.webp?source=1def8aca"
|
||||
mode="" class="avatar"></image>
|
||||
<view class="head-left">
|
||||
<text class="center-head-name">金卡纳练习会</text>
|
||||
<text>19小时前</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="review-item-head-right">
|
||||
<image src="../../../../static/circle/list_icon02.png" mode="aspectFit" class="image">
|
||||
</image>
|
||||
<text>关注</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="review-item-text">
|
||||
<text>光阳弯道150，前后ABS,平踏，沪E蓝牌，落地14500，光阳弯道150，前后ABS,平踏，沪E蓝牌，落地14500光阳弯道150，前后ABS,平踏，沪E蓝牌，落地14500，光阳弯道150，前后ABS,平踏，沪E蓝牌，落地14500</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="review-item">
|
||||
<view class="review-item-head">
|
||||
<view class="review-item-head-left">
|
||||
<image
|
||||
src="https://pica.zhimg.com/80/v2-6606555d10fd91e4b9b581f841fab966_720w.webp?source=1def8aca"
|
||||
mode="" class="avatar"></image>
|
||||
<view class="head-left">
|
||||
<text class="center-head-name">金卡纳练习会</text>
|
||||
<text>19小时前</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="review-item-head-right">
|
||||
<view v-if="false">
|
||||
<image src="../../../../static/circle/list_icon02.png" mode="aspectFit"
|
||||
class="image">
|
||||
</image>
|
||||
<text>关注</text>
|
||||
</view>
|
||||
<view v-else>
|
||||
<image src="../../../../static/circle/list_icon01.png" mode="aspectFit"
|
||||
class="image">
|
||||
</image>
|
||||
<text style="color: #4ED17F;">31</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="review-item-text">
|
||||
<text>光阳弯道150，前后ABS,平踏，沪E蓝牌，落地14500，光阳弯道150，前后ABS,平踏，沪E蓝牌，落地14500</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="recommend">
|
||||
|
||||
</view>
|
||||
<view class="details-footer">
|
||||
<input type="text" :cursorSpacing="20" :focus="firstFocus" @blur="firstFocus=false" placeholder="说点什么吧…"
|
||||
class="input" />
|
||||
<view class="details-footer-nav">
|
||||
<view class="details-footer-nav-item">
|
||||
<image src="../../../../static/common/icon-share.png" mode="aspectFit" class="image"></image>
|
||||
<text>分享</text>
|
||||
</view>
|
||||
<view class="details-footer-nav-item">
|
||||
<image src="../../../../static/common/icon-upvote.png" mode="aspectFit" class="image"></image>
|
||||
<text>点赞</text>
|
||||
</view>
|
||||
<view class="details-footer-nav-item">
|
||||
<image src="../../../../static/common/icon-review.png" mode="aspectFit" class="image"></image>
|
||||
<text>评论</text>
|
||||
</view>
|
||||
<view class="details-footer-nav-item">
|
||||
<image src="../../../../static/common/gift.png" mode="aspectFit" class="image"></image>
|
||||
<text>送礼</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getMenuButton, rpxTopx } from "@/utils/common.js"
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
userData
|
||||
} from '../../hook/userData'
|
||||
const {
|
||||
handPreviewImage,
|
||||
goBack
|
||||
} = userData()
|
||||
const firstFocus = ref(false)
|
||||
// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
// #ifdef MP-WEIXIN
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
let menuButtonTop = rpxTopx(menuButtonInfo.top)
|
||||
// 计算小程序胶囊顶部位置加底部菜单高度
|
||||
let cssMenuButtonTop = rpxTopx(menuButtonInfo.top) + 88 + 226 + 'rpx'
|
||||
// #endif
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.nav-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99999;
|
||||
height: 88rpx;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #08080D;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
|
||||
.image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-navbar__content {
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.details-main {
|
||||
width: 100%;
|
||||
background: #F8F8FA;
|
||||
height: calc(100% - v-bind(cssMenuButtonTop));
|
||||
padding-bottom: 226rpx;
|
||||
// height: 100%;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.article-item-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 38rpx 34rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.avatar {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.article-item-head-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.article-item-head-center {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.center-head-name {
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #08080D;
|
||||
}
|
||||
|
||||
.vip-img {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
vertical-align: middle;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.center-foot {
|
||||
font-size: 24rpx;
|
||||
font-family: AlibabaPuHuiTi_2_55_Regular;
|
||||
color: rgba(43, 43, 53, 0.4);
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.article-item-head-right {
|
||||
width: 100rpx;
|
||||
height: 48rpx;
|
||||
// background: linear-gradient(270deg, #5B8FF0 0%, #1E5099 100%);
|
||||
border-radius: 108rpx;
|
||||
text-align: center;
|
||||
border: 1px solid #4ED17F;
|
||||
|
||||
text {
|
||||
height: 44rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: AlibabaPuHuiTi_2_55_Regular;
|
||||
color: #4ED17F;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.article-item-content {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-image: url(https://rzyx-tycm.bj.bcebos.com/moto/bg05.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
.article-item-content-title {
|
||||
margin-bottom: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #08080D;
|
||||
font-size: 36rpx;
|
||||
|
||||
.price-view {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
|
||||
.price-view-left,
|
||||
.price-view-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.price-view-left {
|
||||
color: #FF4400;
|
||||
align-items: flex-end;
|
||||
|
||||
.price {
|
||||
font-size: 56rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.price-view-right {
|
||||
:last-child {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carInfo {
|
||||
padding: 32rpx 24rpx;
|
||||
background-color: #fff;
|
||||
|
||||
|
||||
.carName {
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.car-argument {
|
||||
display: flex;
|
||||
margin-top: 40rpx;
|
||||
font-size: 24rpx;
|
||||
color: #86898C;
|
||||
|
||||
.car-argument-brand,
|
||||
.car-argument-time,
|
||||
.car-argument-kilometre {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1rpx solid #EDEEEF;
|
||||
align-items: center;
|
||||
|
||||
.data {
|
||||
color: #252931;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.car-argument-kilometre {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.car-describe {
|
||||
color: #252931;
|
||||
font-size: 32rpx;
|
||||
margin-top: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-item-address,
|
||||
.article-item-time {
|
||||
color: rgba(43, 43, 53, 0.6);
|
||||
font-size: 24rpx;
|
||||
|
||||
.image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
vertical-align: bottom;
|
||||
padding: 0 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.article-item-address {
|
||||
background-color: #F8FAFD;
|
||||
padding: 14rpx 16rpx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.article-item-time {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.details-swiper {
|
||||
height: 532rpx;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-main-review {
|
||||
margin-top: 20rpx;
|
||||
padding: 32rpx;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.details-main-review-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 550;
|
||||
|
||||
.more {
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: #86898C;
|
||||
}
|
||||
}
|
||||
|
||||
.review-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.review-item-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 40rpx 0 20rpx;
|
||||
|
||||
.review-item-head-left {
|
||||
display: flex;
|
||||
|
||||
.head-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 28rpx;
|
||||
color: #565960;
|
||||
justify-content: space-between;
|
||||
|
||||
:nth-child(2) {
|
||||
font-size: 24rpx;
|
||||
color: #86898C;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
margin-right: 24rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.review-item-head-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
color: #86898C;
|
||||
|
||||
.image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.review-item-text {
|
||||
padding-left: 96rpx;
|
||||
font-size: 28rpx;
|
||||
color: #252931;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.details-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 226rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 40rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
.input {
|
||||
width: 366rpx;
|
||||
height: 72rpx;
|
||||
background: #F7F8FC;
|
||||
border-radius: 50rpx;
|
||||
padding: 18rpx 16rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.input-placeholder {
|
||||
color: rgba(43, 43, 53, 0.4);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.details-footer-nav {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
height: 72rpx;
|
||||
|
||||
.details-footer-nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
color: #08080D;
|
||||
|
||||
.image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,8 +3,8 @@
|
|||
<uni-nav-bar class="nav-bar">
|
||||
<view class="text">动态详情</view>
|
||||
<template v-slot:left>
|
||||
<image src="../../../../static/common/back.png" mode="aspectFit" class="image"
|
||||
@click="goBack('/pages/circle/circle')"></image>
|
||||
<image src="../../../../static/common/back.png" mode="aspectFit" class="image" @click="goBack('',3)">
|
||||
</image>
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
<view class="details-main">
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in New Issue