fix:二手车页面
CHINAMI-3V5PQ9A\Administrator
parent
27757417f9
commit
f842d79894
|
|
@ -113,6 +113,15 @@
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}, {
|
||||||
|
"path": "pages/circle/views/UsedDetails/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"disableScroll": true
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
|
|
@ -126,13 +135,13 @@
|
||||||
"iconPath": "static/tabs/sel.png",
|
"iconPath": "static/tabs/sel.png",
|
||||||
"selectedIconPath": "static/tabs/sel-select.png"
|
"selectedIconPath": "static/tabs/sel-select.png"
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
"pagePath": "pages/mall/mall",
|
// "pagePath": "pages/mall/mall",
|
||||||
"text": "商城",
|
// "text": "商城",
|
||||||
"iconPath": "static/tabs/mall.png",
|
// "iconPath": "static/tabs/mall.png",
|
||||||
"selectedIconPath": "static/tabs/mall-select.png"
|
// "selectedIconPath": "static/tabs/mall-select.png"
|
||||||
|
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
"pagePath": "pages/IMB/IMB",
|
"pagePath": "pages/IMB/IMB",
|
||||||
"text": "IMOBAO",
|
"text": "IMOBAO",
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,12 @@
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view class="car-list">
|
<view class="car-list">
|
||||||
<view class=" car-list-item">
|
<view class=" car-list-item" v-for="(item,index) in dataresource" :key="index">
|
||||||
<image
|
<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"
|
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>
|
mode="scaleToFill" class="car-photo"></image>
|
||||||
<text class="introduce">YAMAHA雅马哈摩托车</text>
|
<view class="item-bottom">
|
||||||
|
<text class="introduce">YAMAHA雅马哈摩托车，需要电话都不回复</text>
|
||||||
<view class="tag">
|
<view class="tag">
|
||||||
<view class="tag-left">
|
<view class="tag-left">
|
||||||
<text>铃木DL1050</text>
|
<text>铃木DL1050</text>
|
||||||
|
|
@ -19,7 +20,11 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="price-view">
|
<view class="price-view">
|
||||||
<view class="price-view-left">
|
<view class="price-view-left">
|
||||||
<text>￥888.8</text>
|
<view>
|
||||||
|
<text class="symbol">￥</text>
|
||||||
|
<text>888.8</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view class="price-view-right">
|
<view class="price-view-right">
|
||||||
<text>731人看过</text>
|
<text>731人看过</text>
|
||||||
|
|
@ -36,19 +41,12 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts" setup>
|
||||||
export default {
|
import { ref } from 'vue';
|
||||||
data() {
|
const dataresource = ref([{}, {}, {}, {}, {}, {}, {}, {}])
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
page {
|
page {
|
||||||
|
|
@ -59,28 +57,97 @@
|
||||||
.container {
|
.container {
|
||||||
background-color: #f8f9fd;
|
background-color: #f8f9fd;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 20rpx 24rpx;
|
|
||||||
|
|
||||||
.car-list {
|
.car-list {
|
||||||
|
padding: 20rpx 24rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
.car-list-item {
|
.car-list-item {
|
||||||
width: 340rpx;
|
width: 48.5%;
|
||||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-bottom: 25rpx;
|
||||||
|
|
||||||
.car-photo {
|
.car-photo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 300rpx;
|
height: 300rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-bottom {
|
||||||
|
padding: 20rpx 16rpx;
|
||||||
|
|
||||||
.introduce {
|
.introduce {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
user-select: text;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
display: flex;
|
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>
|
</view>
|
||||||
<view class="article">
|
<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">
|
||||||
<view class="article-item-head-left">
|
<view class="article-item-head-left">
|
||||||
<image src="../../../static/mine/lv1.png" mode="" class="avatar"></image>
|
<image src="../../../static/mine/lv1.png" mode="" class="avatar"></image>
|
||||||
|
|
@ -117,7 +118,8 @@
|
||||||
const dataResource = ref<string[]>()
|
const dataResource = ref<string[]>()
|
||||||
const {
|
const {
|
||||||
handPreviewImage,
|
handPreviewImage,
|
||||||
eventsItem
|
eventsItem,
|
||||||
|
goBack
|
||||||
} = userData()
|
} = userData()
|
||||||
interface Props {
|
interface Props {
|
||||||
resource : string[]
|
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">
|
<uni-nav-bar class="nav-bar">
|
||||||
<view class="text">动态详情</view>
|
<view class="text">动态详情</view>
|
||||||
<template v-slot:left>
|
<template v-slot:left>
|
||||||
<image src="../../../../static/common/back.png" mode="aspectFit" class="image"
|
<image src="../../../../static/common/back.png" mode="aspectFit" class="image" @click="goBack('',3)">
|
||||||
@click="goBack('/pages/circle/circle')"></image>
|
</image>
|
||||||
</template>
|
</template>
|
||||||
</uni-nav-bar>
|
</uni-nav-bar>
|
||||||
<view class="details-main">
|
<view class="details-main">
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in New Issue