增加骑行数据，活动登页面
CHINAMI-3V5PQ9A\Administrator
parent
c13993f3b9
commit
27757417f9
|
|
@ -34,7 +34,8 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom",
|
||||||
|
"disableScroll": true
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
"path": "pages/mall/mall",
|
"path": "pages/mall/mall",
|
||||||
|
|
@ -64,7 +65,8 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom",
|
||||||
|
"disableScroll": true
|
||||||
}
|
}
|
||||||
|
|
||||||
}, {
|
}, {
|
||||||
|
|
@ -75,6 +77,42 @@
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}, {
|
||||||
|
"path": "pages/circle/views/topic/topic",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
|
||||||
|
}, {
|
||||||
|
"path": "pages/circle/views/ranking/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"disableScroll": true
|
||||||
|
}
|
||||||
|
|
||||||
|
}, {
|
||||||
|
"path": "pages/circle/views/eventsGather/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationBarBackgroundColor": "#fff",
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"enablePullDownRefresh": true, //下拉刷新，必须配置该参数
|
||||||
|
"onReachBottomDistance": 50 //距离底部100像素时，触发加载更多功能
|
||||||
|
}
|
||||||
|
|
||||||
|
}, {
|
||||||
|
"path": "pages/circle/components/UsedCar",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="circle-title">
|
<view class="circle-title" :style="{paddingTop:menuButtonTop+60+'rpx'}">
|
||||||
<view class="circle-title-nav">
|
<view class="circle-title-nav">
|
||||||
<view class="circle-title-nav-list">
|
<view class="circle-title-nav-list">
|
||||||
<text v-for="(item,index) in navItem" :key="index"
|
<text v-for="(item,index) in navItem" :key="index"
|
||||||
|
|
@ -8,22 +8,25 @@
|
||||||
{{item.text}}
|
{{item.text}}
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
|
<image src="../../static/circle/icon_bar06.png" mode="aspectFit" class="bar06"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="circle-edit">
|
|
||||||
<image src="../../static/common/edit.png" mode="" class="image"></image>
|
|
||||||
</view>
|
|
||||||
<view class="circle-discover">
|
<view class="circle-discover">
|
||||||
<scroll-view style="height: 100%;" scroll-y="true" class="scroll-Y" refresher-enabled scroll-with-animation
|
<Discover :resource="topicList" v-if="selectNav===1"></Discover>
|
||||||
refresher-background="#F8F8FA" @refresherrestore="refresherrestore">
|
<Events :resource="topicList" v-if="selectNav===2"></Events>
|
||||||
<Discover :resource="topicList"></Discover>
|
<UsedCar :resource="topicList" v-if="selectNav===4"></UsedCar>
|
||||||
</scroll-view>
|
</view>
|
||||||
|
<view class="circle-edit">
|
||||||
|
<image src="../../static/circle/icon_add.png" mode="" class="image"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { getMenuButton, rpxTopx } from '@/utils/common.js'
|
||||||
import Discover from './components/discover.vue'
|
import Discover from './components/discover.vue'
|
||||||
|
import Events from './components/Events.vue'
|
||||||
|
import UsedCar from './components/UsedCar.vue'
|
||||||
import {
|
import {
|
||||||
userData
|
userData
|
||||||
} from './hook/userData'
|
} from './hook/userData'
|
||||||
|
|
@ -32,31 +35,40 @@
|
||||||
selectNav,
|
selectNav,
|
||||||
handSelectNav,
|
handSelectNav,
|
||||||
refresherrestore,
|
refresherrestore,
|
||||||
topicList
|
topicList,
|
||||||
|
eventsItem
|
||||||
} = userData()
|
} = userData()
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
let menuButtonInfo = getMenuButton()
|
||||||
|
let menuButtonTop = rpxTopx(menuButtonInfo.top)
|
||||||
|
let cssMenuButtonTop = menuButtonTop + 240 + 'rpx'
|
||||||
|
// #endif
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
page {
|
page {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
/* overflow: hidden; */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.container {
|
.container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #F8F8FA;
|
// background: rgba(255, 255, 255, 0.1);
|
||||||
|
background: #f8f8f8;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.circle-title {
|
.circle-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 137rpx;
|
background-image: url(https://rzyx-tycm.bj.bcebos.com/moto/20240103-095936.jpg);
|
||||||
background-image: url(../../static/common/top-bg.png);
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
// background-position: 100rpx;
|
// background-position: 100rpx;
|
||||||
padding-top: 118rpx;
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -66,6 +78,9 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 28rpx;
|
padding: 28rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.circle-title-nav-list {
|
.circle-title-nav-list {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
|
@ -76,33 +91,70 @@
|
||||||
.nav-item {
|
.nav-item {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
color: rgba(43, 43, 53, 0.6);
|
color: rgba(43, 43, 53, 0.6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item:last-child {
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-select {
|
.nav-select {
|
||||||
font-size: 36rpx;
|
font-size: 34rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #08080D;
|
color: #08080D;
|
||||||
|
|
||||||
padding-right: 15rpx;
|
padding-right: 15rpx;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.nav-select::after {
|
.bar06 {
|
||||||
display: inline-block;
|
height: 50rpx;
|
||||||
width: 15rpx;
|
width: 42rpx;
|
||||||
height: 30rpx;
|
}
|
||||||
content: '';
|
}
|
||||||
background-image: url(../../static/common/icon-halving.png);
|
}
|
||||||
background-size: 100% 100%;
|
|
||||||
|
|
||||||
}
|
// .events-nav {
|
||||||
}
|
// position: relative;
|
||||||
}
|
// padding: 24rpx 48rpx;
|
||||||
}
|
// border-radius: 48rpx 48rpx 0rpx 0rpx;
|
||||||
|
// box-sizing: border-box;
|
||||||
|
// background: #fff;
|
||||||
|
// height: 84rpx;
|
||||||
|
|
||||||
|
// .events-nav-list {
|
||||||
|
// width: 100%;
|
||||||
|
// display: flex;
|
||||||
|
// overflow-x: scroll;
|
||||||
|
|
||||||
|
// &::-webkit-scrollbar {
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .nav-item {
|
||||||
|
// white-space: nowrap;
|
||||||
|
// margin-right: 50rpx;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .nav-select {
|
||||||
|
// color: #4ED17F;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .nav-item:last-child {
|
||||||
|
// margin-right: 40rpx;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .bar06 {
|
||||||
|
// position: absolute;
|
||||||
|
// right: 20rpx;
|
||||||
|
// top: 20rpx;
|
||||||
|
// width: 48rpx;
|
||||||
|
// height: 48rpx;
|
||||||
|
// background-color: #fff;
|
||||||
|
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
.circle-edit {
|
.circle-edit {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -119,9 +171,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle-discover {
|
.circle-discover {
|
||||||
height: calc(100% - 255rpx);
|
height: calc(100% - v-bind(cssMenuButtonTop));
|
||||||
overflow-y: scroll;
|
// height: 100%;
|
||||||
// padding-bottom: -255rpx;
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
||||||
|
// overflow: auto;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,363 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="header">
|
||||||
|
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
|
||||||
|
<swiper-item class="swiper-item">
|
||||||
|
<image
|
||||||
|
src="https://tse3-mm.cn.bing.net/th/id/OIP-C.U589pR3DEOxXLOfbjJSb8wHaEK?w=279&h=180&c=7&r=0&o=5&pid=1.7"
|
||||||
|
mode="scaleToFill" class="swiper-img"></image>
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item class="swiper-item">
|
||||||
|
<image
|
||||||
|
src="https://tse1-mm.cn.bing.net/th/id/OIP-C.I8z52hF5t_s-JuMEZDwQiwHaCU?w=350&h=109&c=7&r=0&o=5&pid=1.7"
|
||||||
|
mode="scaleToFill" class="swiper-img"></image>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
<view class="main">
|
||||||
|
<view class="main-title">
|
||||||
|
<view class="main-title-left">
|
||||||
|
<text>12月骑行榜单</text>
|
||||||
|
</view>
|
||||||
|
<view class="main-title-right" @click="goBack('/pages/circle/views/ranking/index',1)">
|
||||||
|
<text>全部榜单</text>
|
||||||
|
<uni-icons type="right" size="12"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="rank-list">
|
||||||
|
<view class="rank-list-item">
|
||||||
|
<view class="rank-list-item-left">
|
||||||
|
<view class="rank-list-item-img">
|
||||||
|
<image src="../../../static/circle/rank01.png" mode="aspectFit" class="rank-image"></image>
|
||||||
|
</view>
|
||||||
|
<view class="rank-list-item-user">
|
||||||
|
<image
|
||||||
|
src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Cj8mxmgvlGhKhszec5UcVAAAAA?w=207&h=207&c=7&r=0&o=5&pid=1.7"
|
||||||
|
mode="aspectFit" class="avatar"></image>
|
||||||
|
<view class="rank-user-text">
|
||||||
|
<text>浮生若茶</text>
|
||||||
|
<text class="address">四川成都</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="rank-list-item-right"
|
||||||
|
:style="{'backgroundImage':'url(https://rzyx-tycm.bj.bcebos.com/moto/1.png)'}">
|
||||||
|
<view class="mileage">
|
||||||
|
<text class="num">188.8</text>km
|
||||||
|
</view>
|
||||||
|
<view class="follow">
|
||||||
|
<text>关注</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="rank-list-item">
|
||||||
|
<view class="rank-list-item-left">
|
||||||
|
<view class="rank-list-item-img">
|
||||||
|
<image src="../../../static/circle/rank02.png" mode="aspectFit" class="rank-image"></image>
|
||||||
|
</view>
|
||||||
|
<view class="rank-list-item-user">
|
||||||
|
<image
|
||||||
|
src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Cj8mxmgvlGhKhszec5UcVAAAAA?w=207&h=207&c=7&r=0&o=5&pid=1.7"
|
||||||
|
mode="aspectFit" class="avatar"></image>
|
||||||
|
<view class="rank-user-text">
|
||||||
|
<text>浮生若茶</text>
|
||||||
|
<text class="address">四川成都</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="rank-list-item-right"
|
||||||
|
:style="{'backgroundImage':'url(https://rzyx-tycm.bj.bcebos.com/moto/2.png)'}">
|
||||||
|
<view class="mileage">
|
||||||
|
<text class="num">188.8</text>km
|
||||||
|
</view>
|
||||||
|
<view class="follow">
|
||||||
|
<text>关注</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="rank-list-item">
|
||||||
|
<view class="rank-list-item-left">
|
||||||
|
<view class="rank-list-item-img">
|
||||||
|
<image src="../../../static/circle/rank03.png" mode="aspectFit" class="rank-image"></image>
|
||||||
|
</view>
|
||||||
|
<view class="rank-list-item-user">
|
||||||
|
<image
|
||||||
|
src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Cj8mxmgvlGhKhszec5UcVAAAAA?w=207&h=207&c=7&r=0&o=5&pid=1.7"
|
||||||
|
mode="aspectFit" class="avatar"></image>
|
||||||
|
<view class="rank-user-text">
|
||||||
|
<text>浮生若茶</text>
|
||||||
|
<text class="address">四川成都</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="rank-list-item-right"
|
||||||
|
:style="{'backgroundImage':'url(https://rzyx-tycm.bj.bcebos.com/moto/3.png)'}">
|
||||||
|
<view class="mileage">
|
||||||
|
<text class="num">188.8</text>km
|
||||||
|
</view>
|
||||||
|
<view class="follow">
|
||||||
|
<text>关注</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="main-title">
|
||||||
|
<view class="main-title-left">
|
||||||
|
<text>摩旅推荐</text>
|
||||||
|
</view>
|
||||||
|
<view class="main-title-right" @click="goBack('/pages/circle/views/eventsGather/index',1)">
|
||||||
|
<text>更多</text>
|
||||||
|
<uni-icons type="right" size="12"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="recommend-list">
|
||||||
|
<view class="recommend-list-item" v-for="(item,index) in recommend" :key="index">
|
||||||
|
<image
|
||||||
|
src="https://tse1-mm.cn.bing.net/th/id/OIP-C.AomAEAxJDq3dzvj4XxazTgHaE8?w=289&h=194&c=7&r=0&o=5&pid=1.7"
|
||||||
|
mode="scaleToFill" class="image"></image>
|
||||||
|
<view class="item-box">
|
||||||
|
<view class="item-text">
|
||||||
|
<text>团线招募</text>
|
||||||
|
<text>10月17日发团昆明大理香格里拉ehr</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-date">
|
||||||
|
<text>2023/09/22 10:00:00</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-type">
|
||||||
|
摩旅
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="main-title">
|
||||||
|
<view class="main-title-left">
|
||||||
|
<text>安驾推荐</text>
|
||||||
|
</view>
|
||||||
|
<view class="main-title-right">
|
||||||
|
<text>更多</text>
|
||||||
|
<uni-icons type="right" size="12"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="recommend-list">
|
||||||
|
<view class="recommend-list-item" v-for="(item,index) in recommend" :key="index">
|
||||||
|
<image
|
||||||
|
src="https://tse1-mm.cn.bing.net/th/id/OIP-C.AomAEAxJDq3dzvj4XxazTgHaE8?w=289&h=194&c=7&r=0&o=5&pid=1.7"
|
||||||
|
mode="scaleToFill" class="image"></image>
|
||||||
|
<view class="item-box">
|
||||||
|
<view class="item-text">
|
||||||
|
<text>团线招募 </text>
|
||||||
|
<text>10月17日发团昆明大理香格里拉</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-date">
|
||||||
|
<text>2023/09/22 10:00:00</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-type" :style="{backgroundColor:'#658CFF'}">
|
||||||
|
安驾
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import {
|
||||||
|
userData
|
||||||
|
} from '@/pages/circle/hook/userData'
|
||||||
|
let {
|
||||||
|
goBack
|
||||||
|
} = userData()
|
||||||
|
const recommend = ref([{}, {}, {}, {}])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
padding: 24rpx;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
.swiper {
|
||||||
|
padding-bottom: 14rpx;
|
||||||
|
|
||||||
|
.swiper-item {
|
||||||
|
border-radius: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
.main-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
padding: 25rpx 0;
|
||||||
|
|
||||||
|
.main-title-left {
|
||||||
|
position: relative;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
background-image: url(../../../static/circle/icon-title.png);
|
||||||
|
display: inline-block;
|
||||||
|
width: 34rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: -6rpx;
|
||||||
|
left: -12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title-right {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #86898C;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-list {
|
||||||
|
.rank-list-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.rank-list-item-left,
|
||||||
|
.rank-list-item-user,
|
||||||
|
.rank-list-item-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 88rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-user-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 32rpx;
|
||||||
|
|
||||||
|
.address {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #86898C;
|
||||||
|
margin-top: 12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-list-item-right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 160rpx;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
|
||||||
|
.mileage {
|
||||||
|
color: #252931;
|
||||||
|
font-style: oblique;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
.num {
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow {
|
||||||
|
// height: 52rpx;
|
||||||
|
border: 1rpx solid #4ED17F;
|
||||||
|
color: #4ED17F;
|
||||||
|
padding: 8rpx 36rpx;
|
||||||
|
border-radius: 108rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-left: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-list-item-img {
|
||||||
|
.rank-image {
|
||||||
|
width: 56rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommend-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.recommend-list-item {
|
||||||
|
width: 48.5%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 100%;
|
||||||
|
height: 218rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-box {
|
||||||
|
padding: 20rpx 24rpx;
|
||||||
|
|
||||||
|
.item-text {
|
||||||
|
color: #252931;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 28rpx;
|
||||||
|
user-select: text;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-date {
|
||||||
|
color: #86898C;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding-top: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-type {
|
||||||
|
background-color: #4ED17F;
|
||||||
|
color: #fff;
|
||||||
|
width: 68rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 2rpx;
|
||||||
|
border-radius: 0 0 0 16rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="header-screen">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="car-list">
|
||||||
|
<view class=" car-list-item">
|
||||||
|
<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>
|
||||||
|
<view class="tag-right">
|
||||||
|
<text>使用一年以下</text>
|
||||||
|
</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>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
background-color: #f8f9fd;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20rpx 24rpx;
|
||||||
|
|
||||||
|
.car-list {
|
||||||
|
.car-list-item {
|
||||||
|
width: 340rpx;
|
||||||
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.car-photo {
|
||||||
|
width: 100%;
|
||||||
|
height: 300rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introduce {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,36 +1,32 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
<view class="events-nav">
|
||||||
|
<view class="events-nav-list">
|
||||||
|
<text v-for="(item,index) in eventsItem" :key="index"
|
||||||
|
:class="{'nav-item':true,'nav-select':selectNav===index}" @click="handSelectNav(index)">
|
||||||
|
{{item.text}}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<image src="../../../static/circle/icon_bar05.png" mode="aspectFit" class="bar06"></image>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-y="true" class="scroll-Y" refresher-enabled scroll-with-animation
|
||||||
|
refresher-background="#F8F8FA" @refresherrestore="refresherrestore">
|
||||||
<view class="hotTopic">
|
<view class="hotTopic">
|
||||||
<text class="hotTopic-title">热门话题</text>
|
|
||||||
<view class="topicList">
|
<view class="topicList">
|
||||||
<view class="topicList-item">
|
<view class="topicList-item">
|
||||||
<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
|
<span class="topicList-item-iamge">#</span>
|
||||||
</image>
|
|
||||||
<text class="topicList-item-text">如何有效防止摔车</text>
|
<text class="topicList-item-text">如何有效防止摔车</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="topicList-item">
|
<view class="topicList-item">
|
||||||
<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
|
<span class="topicList-item-iamge">#</span>
|
||||||
</image>
|
|
||||||
<text class="topicList-item-text">10月摩旅最美路线</text>
|
<text class="topicList-item-text">10月摩旅最美路线</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="topicList-item">
|
<view class="topicList-item">
|
||||||
<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
|
<span class="topicList-item-iamge">#</span>
|
||||||
</image>
|
|
||||||
<text class="topicList-item-text">如何有效</text>
|
<text class="topicList-item-text">如何有效</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="topicList-item">
|
<view class="topicList-item">
|
||||||
<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
|
<span class="topicList-item-iamge">#</span>
|
||||||
</image>
|
|
||||||
<text class="topicList-item-text">10月摩旅最美路线</text>
|
|
||||||
</view>
|
|
||||||
<view class="topicList-item">
|
|
||||||
<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
|
|
||||||
</image>
|
|
||||||
<text class="topicList-item-text">如何有效防止摔车</text>
|
|
||||||
</view>
|
|
||||||
<view class="topicList-item">
|
|
||||||
<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
|
|
||||||
</image>
|
|
||||||
<text class="topicList-item-text">10月摩旅最美路线</text>
|
<text class="topicList-item-text">10月摩旅最美路线</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -38,6 +34,7 @@
|
||||||
<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">
|
||||||
<view class="article-item-head">
|
<view class="article-item-head">
|
||||||
|
<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>
|
||||||
<view class="article-item-head-center">
|
<view class="article-item-head-center">
|
||||||
<view class="center-head">
|
<view class="center-head">
|
||||||
|
|
@ -46,14 +43,25 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="center-foot">
|
<view class="center-foot">
|
||||||
<text style="padding-right: 22rpx;">12-31</text>
|
<text style="padding-right: 22rpx;">12-31</text>
|
||||||
<text>豪爵铃木 DL250车主发布</text>
|
<text>宝马车主发布</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="article-item-head-right">
|
<view class="article-item-head-right">
|
||||||
|
<view class="item-first">
|
||||||
<text>关注</text>
|
<text>关注</text>
|
||||||
</view>
|
</view>
|
||||||
|
<image src="../../../static/circle/icon_list_more.png" mode="aspectFit" class="image">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="article-item-content">
|
<view class="article-item-content">
|
||||||
|
<view class="topicList-item">
|
||||||
|
<image src="../../../static/circle/icon_huati.png" mode="aspectFill"
|
||||||
|
class="topicList-item-iamge">
|
||||||
|
</image>
|
||||||
|
<text class="topicList-item-text">如何有效防止摔车</text>
|
||||||
|
</view>
|
||||||
<view class="article-item-content-title">
|
<view class="article-item-content-title">
|
||||||
<text>朋友上周推荐的这个骑行软件，数据记录好精准，感觉很不错！</text>
|
<text>朋友上周推荐的这个骑行软件，数据记录好精准，感觉很不错！</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -62,16 +70,12 @@
|
||||||
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速！
|
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速！
|
||||||
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速!
|
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速!
|
||||||
</view>
|
</view>
|
||||||
<view class="topicList-item">
|
|
||||||
<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
|
|
||||||
</image>
|
|
||||||
<text class="topicList-item-text">如何有效防止摔车</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view :class="`grid-container${item.url.length<=9?item.url.length:9}`">
|
<view :class="`grid-container${item.url.length<=9?item.url.length:9}`">
|
||||||
<view class="grid-item" v-for="(itemchild,indexchild) in item.url" :key="indexchild">
|
<view class="grid-item" v-for="(itemchild,indexchild) in item.url" :key="indexchild">
|
||||||
<image :src="itemchild" @click="handPreviewImage(item.url)" mode="aspectFill"
|
<image :lazy-load="true" :src="itemchild" @click="handPreviewImage(item.url)"
|
||||||
class="grid-item-iamge">
|
mode="aspectFill" class="grid-item-iamge">
|
||||||
</image>
|
</image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -80,14 +84,12 @@
|
||||||
<text>四川省成都市青龙湖湿地公园</text>
|
<text>四川省成都市青龙湖湿地公园</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="article-item-review">
|
<view class="article-item-review">
|
||||||
<image src="../../../static/common/icon-review-logo.png" mode="aspectFill" class="image"></image>
|
<text>说点什么吧~</text>
|
||||||
<text>说点什么吧，评论留言送积分哦！</text>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="article-item-controls">
|
<view class="article-item-controls">
|
||||||
<view class="article-item-controls-left">
|
|
||||||
<view class="article-item-controls-left-nav">
|
<view class="article-item-controls-left-nav">
|
||||||
<image src="../../../static/common/icon-share.png" mode="aspectFill" class="image"></image>
|
<image src="../../../static/common/icon-share.png" mode="aspectFill" class="image"></image>
|
||||||
<text>235</text>
|
<text>分享</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="article-item-controls-left-nav">
|
<view class="article-item-controls-left-nav">
|
||||||
<image src="../../../static/common/icon-review.png" mode="aspectFill" class="image"></image>
|
<image src="../../../static/common/icon-review.png" mode="aspectFill" class="image"></image>
|
||||||
|
|
@ -97,13 +99,12 @@
|
||||||
<image src="../../../static/common/icon-upvote.png" mode="aspectFill" class="image"></image>
|
<image src="../../../static/common/icon-upvote.png" mode="aspectFill" class="image"></image>
|
||||||
<text>点赞</text>
|
<text>点赞</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
<view class="article-item-controls-right">
|
|
||||||
<image src="../../../static/common/icon-more.png" mode="aspectFill" class="image"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -115,7 +116,8 @@
|
||||||
const { proxy } = getCurrentInstance();
|
const { proxy } = getCurrentInstance();
|
||||||
const dataResource = ref<string[]>()
|
const dataResource = ref<string[]>()
|
||||||
const {
|
const {
|
||||||
handPreviewImage
|
handPreviewImage,
|
||||||
|
eventsItem
|
||||||
} = userData()
|
} = userData()
|
||||||
interface Props {
|
interface Props {
|
||||||
resource : string[]
|
resource : string[]
|
||||||
|
|
@ -126,51 +128,104 @@
|
||||||
dataResource.value = props.resource
|
dataResource.value = props.resource
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style>
|
||||||
page {
|
page {
|
||||||
height: 500px;
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
// padding: 0 24rpx;
|
||||||
|
// overflow: auto;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-nav {
|
||||||
|
position: relative;
|
||||||
|
padding: 24rpx 48rpx;
|
||||||
|
// border-radius: 48rpx 48rpx 0rpx 0rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #fff;
|
||||||
|
height: 84rpx;
|
||||||
|
|
||||||
|
.events-nav-list {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
overflow-x: scroll;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-right: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-select {
|
||||||
|
color: #4ED17F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:last-child {
|
||||||
|
margin-right: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar06 {
|
||||||
|
position: absolute;
|
||||||
|
right: 20rpx;
|
||||||
|
top: 20rpx;
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-Y {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-Y ::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0 !important;
|
||||||
|
height: 0 !important;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hotTopic {
|
.hotTopic {
|
||||||
background-color: #fff;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 28rpx;
|
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 16rpx 0;
|
margin: 16rpx 0;
|
||||||
|
|
||||||
.hotTopic-title {
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #08080D;
|
|
||||||
font-weight: 600;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.topicList {
|
.topicList {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 32rpx 0;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topicList-item {
|
.topicList-item {
|
||||||
// height: 48rpx;
|
background: linear-gradient(180deg, #F7FFFA 0%, #FFFFFF 100%);
|
||||||
background: rgba(54, 103, 189, 0.12);
|
border-radius: 50rpx;
|
||||||
border-radius: 8rpx;
|
|
||||||
padding: 8rpx 16rpx;
|
padding: 8rpx 16rpx;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 48%;
|
width: 48%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 10rpx 0;
|
margin: 10rpx 0;
|
||||||
|
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(147, 147, 147, 0.08);
|
||||||
|
|
||||||
.topicList-item-iamge {
|
.topicList-item-iamge {
|
||||||
width: 48rpx;
|
width: 48rpx;
|
||||||
height: 48rpx;
|
height: 48rpx;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding-right: 16rpx;
|
padding-right: 5rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topicList-item-text {
|
.topicList-item-text {
|
||||||
|
|
@ -186,15 +241,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.article {
|
.article {
|
||||||
background-color: #fff;
|
// padding: 0 34rpx;
|
||||||
padding: 0 34rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.article-item {
|
.article-item {
|
||||||
padding: 54rpx 0 50rpx;
|
padding: 24rpx;
|
||||||
border-bottom: 1px solid #f2f2f2;
|
border-bottom: 1px solid #f2f2f2;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
.article-item-head {
|
.article-item-head {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -206,8 +263,13 @@
|
||||||
height: 76rpx;
|
height: 76rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.article-item-head-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.article-item-head-center {
|
.article-item-head-center {
|
||||||
margin-left: -100rpx;
|
margin-left: 16rpx;
|
||||||
|
|
||||||
.center-head-name {
|
.center-head-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -231,28 +293,41 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-item-head-right {
|
.article-item-head-right {
|
||||||
width: 104rpx;
|
display: flex;
|
||||||
|
|
||||||
|
.item-first {
|
||||||
|
width: 100rpx;
|
||||||
height: 48rpx;
|
height: 48rpx;
|
||||||
background: linear-gradient(270deg, #5B8FF0 0%, #1E5099 100%);
|
// background: linear-gradient(270deg, #5B8FF0 0%, #1E5099 100%);
|
||||||
border-radius: 8rpx;
|
border-radius: 108rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border: 1px solid #4ED17F;
|
||||||
|
|
||||||
text {
|
text {
|
||||||
height: 44rpx;
|
height: 44rpx;
|
||||||
font-size: 26rpx;
|
font-size: 24rpx;
|
||||||
font-family: AlibabaPuHuiTi_2_55_Regular;
|
font-family: AlibabaPuHuiTi_2_55_Regular;
|
||||||
color: #FFFFFF;
|
color: #4ED17F;
|
||||||
line-height: 44rpx;
|
line-height: 44rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
border: 1px dashed #909090;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-item-content {
|
.article-item-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.article-item-content-title {
|
.article-item-content-title {
|
||||||
padding: 32rpx 0 16rpx;
|
padding: 16rpx 0;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #08080D;
|
color: #08080D;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
|
|
@ -274,18 +349,19 @@
|
||||||
.topicList-item {
|
.topicList-item {
|
||||||
// height: 48rpx;
|
// height: 48rpx;
|
||||||
background: rgba(54, 103, 189, 0.12);
|
background: rgba(54, 103, 189, 0.12);
|
||||||
border-radius: 8rpx;
|
border-radius: 50rpx;
|
||||||
padding: 8rpx 16rpx;
|
padding: 8rpx 16rpx;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 28rpx 0 0;
|
margin: 28rpx 0 0;
|
||||||
|
// display: flex;
|
||||||
|
line-height: 30rpx;
|
||||||
|
|
||||||
.topicList-item-iamge {
|
.topicList-item-iamge {
|
||||||
width: 48rpx;
|
width: 32rpx;
|
||||||
height: 48rpx;
|
height: 32rpx;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding-right: 16rpx;
|
padding-right: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topicList-item-text {
|
.topicList-item-text {
|
||||||
|
|
@ -293,7 +369,7 @@
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
font-family: AlibabaPuHuiTi_2_55_Regular;
|
font-family: AlibabaPuHuiTi_2_55_Regular;
|
||||||
color: #08080D;
|
color: #08080D;
|
||||||
line-height: 36rpx;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -524,14 +600,14 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.article-item-controls-left {
|
|
||||||
display: flex;
|
|
||||||
width: 70%;
|
|
||||||
|
|
||||||
.article-item-controls-left-nav {
|
.article-item-controls-left-nav {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #08080D;
|
color: #08080D;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: 48rpx;
|
width: 48rpx;
|
||||||
|
|
@ -541,14 +617,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-item-controls-right {
|
|
||||||
.image {
|
|
||||||
width: 48rpx;
|
|
||||||
height: 48rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -8,7 +8,7 @@ const getAssetsImages = (url) => {
|
||||||
export function userData() {
|
export function userData() {
|
||||||
const selectNav = ref<number>(1)
|
const selectNav = ref<number>(1)
|
||||||
const navItem = ref<any>([{ text: '关注', id: 0 }, { text: '发现', id: 1 }, { text: '活动', id: 2 }, { text: '闲置', id: 3 }, { text: '二手车', id: 4 }])
|
const navItem = ref<any>([{ text: '关注', id: 0 }, { text: '发现', id: 1 }, { text: '活动', id: 2 }, { text: '闲置', id: 3 }, { text: '二手车', id: 4 }])
|
||||||
|
const eventsItem = ref<any>([{ text: '热门', id: 0 }, { text: '同城', id: 1 }, { text: '摩旅', id: 2 }, { text: '跑山', id: 3 }, { text: '改装', id: 4 }, { text: '急速飞车', id: 5 }, { text: '急速飞车', id: 6 }])
|
||||||
const handSelectNav = function (index : number) {
|
const handSelectNav = function (index : number) {
|
||||||
selectNav.value = index
|
selectNav.value = index
|
||||||
}
|
}
|
||||||
|
|
@ -31,12 +31,33 @@ export function userData() {
|
||||||
// }
|
// }
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
const goBack = function (url : string, type : any) {
|
||||||
|
console.log(url, type)
|
||||||
|
switch (type) {
|
||||||
|
case 1:
|
||||||
|
uni.navigateTo({
|
||||||
|
url: url
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
uni.switchTab({
|
||||||
|
url: url
|
||||||
|
});
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
selectNav,
|
selectNav,
|
||||||
navItem,
|
navItem,
|
||||||
handSelectNav,
|
handSelectNav,
|
||||||
refresherrestore,
|
refresherrestore,
|
||||||
topicList,
|
topicList,
|
||||||
handPreviewImage
|
handPreviewImage,
|
||||||
|
eventsItem,
|
||||||
|
goBack
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -3,44 +3,45 @@
|
||||||
<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>
|
<image src="../../../../static/common/back.png" mode="aspectFit" class="image"
|
||||||
|
@click="goBack('/pages/circle/circle')"></image>
|
||||||
</template>
|
</template>
|
||||||
</uni-nav-bar>
|
</uni-nav-bar>
|
||||||
<view class="details-main">
|
<view class="details-main">
|
||||||
<scroll-view scroll-y="true" style="height: 100%;" class="scroll-Y" refresher-enabled scroll-with-animation
|
|
||||||
refresher-background="#F8F8FA">
|
|
||||||
<view class="article-content">
|
<view class="article-content">
|
||||||
<view class="article-item-head">
|
<view class="article-item-head">
|
||||||
<image src="../../../../static/mine/lv1.png" mode="" class="avatar"></image>
|
<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="article-item-head-center">
|
||||||
<view class="center-head">
|
<view class="center-head">
|
||||||
<text class="center-head-name">金卡纳练习会</text>
|
<text class="center-head-name">金卡纳练习会</text>
|
||||||
<image src="../../../../static/common/vip.png" class="vip-img" mode=""></image>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="center-foot">
|
|
||||||
<text style="padding-right: 22rpx;">12-31</text>
|
|
||||||
<text>豪爵铃木 DL250车主发布</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="article-item-head-right">
|
<view class="article-item-head-right">
|
||||||
<text>关注</text>
|
<text>关注</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<swiper :indicator-dots="true" circular current="1" :autoplay="false" :interval="3000"
|
<swiper :indicator-dots="true" circular current="1" :autoplay="false" :interval="3000" :duration="500"
|
||||||
:duration="1000" class="details-swiper">
|
class="details-swiper">
|
||||||
<swiper-item>
|
<swiper-item>
|
||||||
<image
|
<image
|
||||||
src="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"
|
src="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"
|
||||||
mode="scaleToFill" class="image"></image>
|
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://pica.zhimg.com/80/v2-6606555d10fd91e4b9b581f841fab966_720w.webp?source=1def8aca"
|
||||||
|
mode="scaleToFill" class="image"
|
||||||
|
@click="handPreviewImage(['https://pica.zhimg.com/80/v2-6606555d10fd91e4b9b581f841fab966_720w.webp?source=1def8aca'])">
|
||||||
|
</image>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
<view class="article-item-content">
|
<view class="article-item-content">
|
||||||
<view class="topicList-item">
|
|
||||||
<image src="../../../../static/common/topic.png" mode="aspectFill"
|
|
||||||
class="topicList-item-iamge">
|
|
||||||
</image>
|
|
||||||
<text class="topicList-item-text">如何有效防止摔车</text>
|
|
||||||
</view>
|
|
||||||
<view class="article-item-content-title">
|
<view class="article-item-content-title">
|
||||||
<text>朋友上周推荐的这个骑行软件，数据记录好精准，感觉很不错！</text>
|
<text>朋友上周推荐的这个骑行软件，数据记录好精准，感觉很不错！</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -49,36 +50,114 @@
|
||||||
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速！
|
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速！
|
||||||
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速!
|
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速!
|
||||||
</view>
|
</view>
|
||||||
|
<view class="topicList-item">
|
||||||
|
<image src="../../../../static/circle/icon_huati.png" mode="aspectFill"
|
||||||
|
class="topicList-item-iamge">
|
||||||
|
</image>
|
||||||
|
<text class="topicList-item-text">如何有效防止摔车</text>
|
||||||
|
</view>
|
||||||
<view class="article-item-address">
|
<view class="article-item-address">
|
||||||
<image src="../../../../static/common/icon-address.png" mode="aspectFill" class="image">
|
<image src="../../../../static/common/icon-address.png" mode="aspectFill" class="image">
|
||||||
</image>
|
</image>
|
||||||
<text>四川省成都市青龙湖湿地公园</text>
|
<text>四川省成都市青龙湖湿地公园</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="article-item-time">
|
||||||
|
<text>2023/03/12 12:00发布</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view class="details-main-gift">
|
<view class="details-main-gift">
|
||||||
<view class="details-main-gift-left">
|
<text class="details-main-gift-top">送礼</text>
|
||||||
<text class="details-main-gift-left-top">送礼</text>
|
<view class="details-main-gift-bottom">
|
||||||
<text class="details-main-gift-left-bottom">送礼榜虚位以待，你即将坐上送礼榜首哦！</text>
|
<!-- <text class="details-main-gift-bottom-bottom">送礼榜虚位以待，你即将坐上送礼榜首哦！</text> -->
|
||||||
|
<view class="details-main-gift-bottom-left">
|
||||||
|
<view class="details-main-gift-bottom-ranking">
|
||||||
|
<image
|
||||||
|
src="https://picx.zhimg.com/80/v2-526038472bd17ef823bb5d6259f1b51e_720w.webp?source=1def8aca"
|
||||||
|
mode="aspectFit" class="avatar"></image>
|
||||||
|
<image
|
||||||
|
src="https://pica.zhimg.com/80/v2-6606555d10fd91e4b9b581f841fab966_720w.webp?source=1def8aca"
|
||||||
|
mode="aspectFit" class="avatar"></image>
|
||||||
|
<image
|
||||||
|
src="https://picx.zhimg.com/80/v2-526038472bd17ef823bb5d6259f1b51e_720w.webp?source=1def8aca"
|
||||||
|
mode="aspectFit" class="avatar"></image>
|
||||||
|
<image
|
||||||
|
src="https://pica.zhimg.com/80/v2-6606555d10fd91e4b9b581f841fab966_720w.webp?source=1def8aca"
|
||||||
|
mode="aspectFit" class="avatar"></image>
|
||||||
|
<image
|
||||||
|
src="https://picx.zhimg.com/80/v2-526038472bd17ef823bb5d6259f1b51e_720w.webp?source=1def8aca"
|
||||||
|
mode="aspectFit" class="avatar"></image>
|
||||||
|
</view>
|
||||||
|
<view class="details-main-gift-bottom-num">
|
||||||
|
<text>2345 人送礼</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="details-main-gift-right">
|
<view class="details-main-gift-right">
|
||||||
<image src="../../../../static/common/giveGifts.png" mode="aspectFit" class="image"></image>
|
<text>赠礼上榜</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="details-main-gift">
|
|
||||||
<view class="details-main-gift-left">
|
|
||||||
<text class="details-main-gift-left-top">评论</text>
|
|
||||||
<text class="details-main-gift-left-bottom">送这里还没人评论哦，点击评论</text>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="details-main-gift-right">
|
<view class="details-main-review">
|
||||||
<image src="../../../../static/common/review.png" mode="aspectFit" class="image"></image>
|
<text class="details-main-review-title">评论 (22)</text>
|
||||||
|
<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>
|
</view>
|
||||||
</scroll-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="details-footer">
|
</view>
|
||||||
<input type="text" :focus="firstFocus" @blur="firstFocus=false" placeholder="说点什么吧…" class="input" />
|
<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="details-footer" v-if="true">
|
||||||
|
<input type="text" :cursorSpacing="20" :focus="firstFocus" @blur="firstFocus=false" placeholder="说点什么吧…"
|
||||||
|
class="input" />
|
||||||
<view class="details-footer-nav">
|
<view class="details-footer-nav">
|
||||||
<view class="details-footer-nav-item">
|
<view class="details-footer-nav-item">
|
||||||
<image src="../../../../static/common/icon-share.png" mode="aspectFit" class="image"></image>
|
<image src="../../../../static/common/icon-share.png" mode="aspectFit" class="image"></image>
|
||||||
|
|
@ -109,13 +188,16 @@
|
||||||
userData
|
userData
|
||||||
} from '../../hook/userData'
|
} from '../../hook/userData'
|
||||||
const {
|
const {
|
||||||
handPreviewImage
|
handPreviewImage,
|
||||||
|
goBack
|
||||||
} = userData()
|
} = userData()
|
||||||
const firstFocus = ref(false)
|
const firstFocus = ref(false)
|
||||||
// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||||
let menuButtonTop = rpxTopx(menuButtonInfo.top)
|
let menuButtonTop = rpxTopx(menuButtonInfo.top)
|
||||||
|
// 计算小程序胶囊顶部位置加底部菜单高度
|
||||||
|
let cssMenuButtonTop = rpxTopx(menuButtonInfo.top) + 88 + 226 + 'rpx'
|
||||||
// #endif
|
// #endif
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -127,11 +209,13 @@
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.nav-bar {
|
.nav-bar {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 99999;
|
||||||
|
height: 88rpx;
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -159,8 +243,15 @@
|
||||||
.details-main {
|
.details-main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #F8F8FA;
|
background: #F8F8FA;
|
||||||
height: calc(100% - 320rpx);
|
height: calc(100% - v-bind(cssMenuButtonTop));
|
||||||
overflow-y: scroll;
|
padding-bottom: 226rpx;
|
||||||
|
// height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.article-content {
|
.article-content {
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
|
|
@ -175,10 +266,16 @@
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 76rpx;
|
width: 76rpx;
|
||||||
height: 76rpx;
|
height: 76rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-item-head-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-item-head-center {
|
.article-item-head-center {
|
||||||
margin-left: -100rpx;
|
margin-left: 24rpx;
|
||||||
|
|
||||||
.center-head-name {
|
.center-head-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -202,18 +299,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-item-head-right {
|
.article-item-head-right {
|
||||||
width: 104rpx;
|
width: 100rpx;
|
||||||
height: 48rpx;
|
height: 48rpx;
|
||||||
background: linear-gradient(270deg, #5B8FF0 0%, #1E5099 100%);
|
// background: linear-gradient(270deg, #5B8FF0 0%, #1E5099 100%);
|
||||||
border-radius: 8rpx;
|
border-radius: 108rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border: 1px solid #4ED17F;
|
||||||
|
|
||||||
text {
|
text {
|
||||||
height: 44rpx;
|
height: 44rpx;
|
||||||
font-size: 26rpx;
|
font-size: 24rpx;
|
||||||
font-family: AlibabaPuHuiTi_2_55_Regular;
|
font-family: AlibabaPuHuiTi_2_55_Regular;
|
||||||
color: #FFFFFF;
|
color: #4ED17F;
|
||||||
line-height: 44rpx;
|
line-height: 44rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -226,10 +323,10 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.article-item-content-title {
|
.article-item-content-title {
|
||||||
padding: 32rpx 0 16rpx;
|
margin-bottom: 32rpx;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
color: #08080D;
|
color: #08080D;
|
||||||
font-size: 32rpx;
|
font-size: 36rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-item-content-text {
|
.article-item-content-text {
|
||||||
|
|
@ -247,40 +344,31 @@
|
||||||
|
|
||||||
.topicList-item {
|
.topicList-item {
|
||||||
// height: 48rpx;
|
// height: 48rpx;
|
||||||
background: rgba(54, 103, 189, 0.12);
|
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
padding: 8rpx 16rpx;
|
display: flex;
|
||||||
display: inline-block;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
margin: 32rpx 0;
|
||||||
|
|
||||||
.topicList-item-iamge {
|
.topicList-item-iamge {
|
||||||
width: 48rpx;
|
width: 32rpx;
|
||||||
height: 48rpx;
|
height: 32rpx;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding-right: 16rpx;
|
padding-right: 8rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topicList-item-text {
|
.topicList-item-text {
|
||||||
height: 36rpx;
|
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
font-family: AlibabaPuHuiTi_2_55_Regular;
|
font-family: AlibabaPuHuiTi_2_55_Regular;
|
||||||
color: #08080D;
|
color: #4ED17F;
|
||||||
line-height: 36rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// img {
|
|
||||||
// max-width: 100%;
|
|
||||||
// height: auto;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-item-address {
|
.article-item-address,
|
||||||
|
.article-item-time {
|
||||||
color: rgba(43, 43, 53, 0.6);
|
color: rgba(43, 43, 53, 0.6);
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
padding-top: 32rpx;
|
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: 32rpx;
|
width: 32rpx;
|
||||||
|
|
@ -289,6 +377,10 @@
|
||||||
padding: 0 2rpx;
|
padding: 0 2rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.article-item-time {
|
||||||
|
margin-top: 28rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-swiper {
|
.details-swiper {
|
||||||
|
|
@ -301,50 +393,133 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-main-gift {
|
.details-main-gift {
|
||||||
height: 164rpx;
|
// height: 164rpx;
|
||||||
margin-top: 16rpx;
|
margin-top: 16rpx;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
padding: 32rpx;
|
padding: 32rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
|
// align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.details-main-gift-left {
|
.details-main-gift-top {
|
||||||
|
font-weight: 600;
|
||||||
|
padding-bottom: 16rpx;
|
||||||
|
color: #08080D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-main-gift-bottom {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
// flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.details-main-gift-bottom-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.details-main-gift-bottom-ranking {
|
||||||
|
.avatar {
|
||||||
|
width: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
.details-main-gift-left-top {
|
|
||||||
font-weight: 600;
|
|
||||||
padding-bottom: 16rpx;
|
|
||||||
color: #08080D;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-main-gift-left-bottom {
|
:nth-child(n+2):nth-child(-n+5) {
|
||||||
font-size: 24rpx;
|
margin-left: -20rpx;
|
||||||
color: rgba(168, 172, 185, 1);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-main-gift-left-top {
|
.details-main-gift-bottom-num {
|
||||||
font-weight: 600;
|
margin-left: 24rpx;
|
||||||
padding-bottom: 16rpx;
|
font-size: 28rpx;
|
||||||
color: #08080D;
|
color: #565960;
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-main-gift-left-bottom {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: rgba(168, 172, 185, 1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-main-gift-right {
|
.details-main-gift-right {
|
||||||
|
width: 144rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background: #4ED17F;
|
||||||
|
line-height: 60rpx;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 108rpx 108rpx 108rpx 108rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-main-review {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 32rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
|
||||||
|
.details-main-review-title {
|
||||||
|
font-weight: 550;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
.image {
|
||||||
width: 160rpx;
|
width: 32rpx;
|
||||||
height: 48rpx;
|
height: 32rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.review-item-text {
|
||||||
|
padding-left: 96rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #252931;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-footer {
|
.details-footer {
|
||||||
|
|
@ -353,17 +528,16 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 226rpx;
|
height: 226rpx;
|
||||||
margin-top: 32rpx;
|
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
padding: 40rpx 32rpx;
|
padding: 40rpx 32rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.input {
|
.input {
|
||||||
width: 294rpx;
|
width: 366rpx;
|
||||||
height: 80rpx;
|
height: 72rpx;
|
||||||
background: #F7F8FC;
|
background: #F7F8FC;
|
||||||
border-radius: 9rpx;
|
border-radius: 50rpx;
|
||||||
padding: 18rpx 16rpx;
|
padding: 18rpx 16rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
|
@ -376,7 +550,7 @@
|
||||||
.details-footer-nav {
|
.details-footer-nav {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 80rpx;
|
height: 72rpx;
|
||||||
|
|
||||||
.details-footer-nav-item {
|
.details-footer-nav-item {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="item-box" v-for="(item,index) in itemBox" :key="index">
|
||||||
|
<view class="item-box-left">
|
||||||
|
<image
|
||||||
|
src="https://tse4-mm.cn.bing.net/th/id/OIP-C.eR_dt3PY3V5-eCPYQUVqjwHaEK?w=249&h=180&c=7&r=0&o=5&pid=1.7"
|
||||||
|
mode="scaleToFill" class="image">
|
||||||
|
</image>
|
||||||
|
<view class="type">
|
||||||
|
摩旅
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-box-right">
|
||||||
|
<text class="item-text">10月17日发团，挑战丙察察标题最多可以展示两行，其余省略...</text>
|
||||||
|
<text class="item-date">活动时间：05/27-06/20</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
|
||||||
|
import { ref } from "vue";
|
||||||
|
const itemBox = ref([{}, {}, {}, {}, {}, {}, {}])
|
||||||
|
// 下拉刷新
|
||||||
|
onPullDownRefresh(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
console.log("下拉刷新")
|
||||||
|
}, 800)
|
||||||
|
})
|
||||||
|
onReachBottom(() => {
|
||||||
|
console.log("上拉加载更多", itemBox.value.length)
|
||||||
|
if (itemBox.value.length >= 50) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
for (let i = 0; i <= 10; i++) {
|
||||||
|
itemBox.value.push({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20rpx 24rpx;
|
||||||
|
|
||||||
|
.item-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 208rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 24rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
|
||||||
|
.item-box-left {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 240rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type {
|
||||||
|
background-color: #4ED17F;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
border-radius: 0 16rpx 0 16rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 6rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-box-right {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 28rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
|
||||||
|
.item-text {
|
||||||
|
user-select: text;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-date {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #86898C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-box:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,420 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="header" :style="{paddingTop:menuButtonTop+'rpx'}">
|
||||||
|
<view class="header-nav">
|
||||||
|
<view class="header-nav-left">
|
||||||
|
<uni-icons type="left" size="20" color="#fff" @click="goBack('',3)"></uni-icons>
|
||||||
|
<text class="left-all">全网</text>
|
||||||
|
<text>关注</text>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="header-nav-right">
|
||||||
|
<view class="country">
|
||||||
|
<text>全国</text>
|
||||||
|
<uni-icons type="down" size="14" color="#fff"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<image src="../../../../static/circle/share.png" mode="aspectFit" class="shareImg"></image>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
<view class="list-banner">
|
||||||
|
<image src="../../../../static/circle/pro_pic_bang.png" mode="aspectFit" class="image"></image>
|
||||||
|
</view>
|
||||||
|
<view class="rank-list-type">
|
||||||
|
<view class="type-nav">
|
||||||
|
<view v-for="(item,index) in typeNav" :key="index" @click="ToggleList(index)"
|
||||||
|
:class="{'type-nav-item':true,'active':active===index}">
|
||||||
|
{{item.text}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="podium">
|
||||||
|
<view class="podium-runnerUp">
|
||||||
|
<view class="podium-top">
|
||||||
|
<image src="../../../../static/circle/rank02.png" mode="aspectFit" class="crownImg"></image>
|
||||||
|
</view>
|
||||||
|
<view class="podium-bottom">
|
||||||
|
<text class="nickname">哼哼麻麻</text>
|
||||||
|
<text class="address">四川成都</text>
|
||||||
|
<view>
|
||||||
|
<text class="mileage">1999</text>km
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="podium-Champion">
|
||||||
|
<view class="podium-top">
|
||||||
|
<image src="../../../../static/circle/rank01.png" mode="aspectFit" class="crownImg"></image>
|
||||||
|
</view>
|
||||||
|
<view class="podium-bottom">
|
||||||
|
<text class="nickname">哼哼麻麻</text>
|
||||||
|
<text class="address">四川成都</text>
|
||||||
|
<view>
|
||||||
|
<text class="mileage">1999</text>km
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="podium-thirdPlace">
|
||||||
|
<view class="podium-top">
|
||||||
|
<image src="../../../../static/circle/rank03.png" mode="aspectFit" class="crownImg"></image>
|
||||||
|
</view>
|
||||||
|
<view class="podium-bottom">
|
||||||
|
<text class="nickname">哼哼麻麻</text>
|
||||||
|
<text class="address">四川成都</text>
|
||||||
|
<view>
|
||||||
|
<text class="mileage">1999</text>km
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="rankingList">
|
||||||
|
<view class="rankingList-item" v-for="(item,index) in rankingList" :key="index">
|
||||||
|
<view class="rankingList-item-left">
|
||||||
|
<text class="rank-num">{{index++}}</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="user-profile">
|
||||||
|
<view class="nickname">
|
||||||
|
<text>风见志郎</text>
|
||||||
|
<!-- <image src="" mode=""></image> -->
|
||||||
|
</view>
|
||||||
|
<text class="address">四川成都</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="rankingList-item-right">
|
||||||
|
<text class="mileage">3000</text>km
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="my-ranking">
|
||||||
|
<view class="rankingList-item">
|
||||||
|
<view class="rankingList-item-left">
|
||||||
|
<text class="rank-num">{{'999+'}}</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="user-profile">
|
||||||
|
<view class="nickname">
|
||||||
|
<text>风见志郎</text>
|
||||||
|
<!-- <image src="" mode=""></image> -->
|
||||||
|
</view>
|
||||||
|
<text class="address">四川成都</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="rankingList-item-right">
|
||||||
|
<text class="mileage">3000</text>km
|
||||||
|
</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()
|
||||||
|
let menuButtonTop = ref(30)
|
||||||
|
let active = ref(0)
|
||||||
|
const rankingList = ref([{}, {}, {}, {}, {}, {}, {}])
|
||||||
|
const typeNav = ref([{ text: '01月榜单' }, { text: '2024年度榜单' }, { text: '总榜单' }])
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
//获取小程序胶囊位置
|
||||||
|
let menuButtonInfo = getMenuButton()
|
||||||
|
menuButtonTop.value = rpxTopx(menuButtonInfo.top)
|
||||||
|
// #endif
|
||||||
|
// 切换榜单
|
||||||
|
const ToggleList = function (index) {
|
||||||
|
active.value = index
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.nav-bar {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 99999;
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: url(https://rzyx-tycm.bj.bcebos.com/moto/qixing.jpg) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding: 30rpx 30rpx 0;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.header-nav {
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 34rpx;
|
||||||
|
// height: 48rpx;
|
||||||
|
|
||||||
|
.header-nav-left {
|
||||||
|
.left-all {
|
||||||
|
margin: 0 48rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-nav-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.country {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shareImg {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-banner {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
height: 80rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-list-type {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 52rpx;
|
||||||
|
margin-top: 36rpx;
|
||||||
|
|
||||||
|
.type-nav {
|
||||||
|
// width: 420rpx;
|
||||||
|
background-color: #090B0A;
|
||||||
|
border-radius: 82rpx 82rpx 82rpx 82rpx;
|
||||||
|
display: flex;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 24rpx;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.type-nav-item {
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(90deg, #406e4d 0%, #386864 100%);
|
||||||
|
border-radius: 82rpx 82rpx 82rpx 82rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.podium {
|
||||||
|
margin-top: 78rpx;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.podium-runnerUp,
|
||||||
|
.podium-thirdPlace {
|
||||||
|
padding-top: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.podium-runnerUp,
|
||||||
|
.podium-Champion,
|
||||||
|
.podium-thirdPlace {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.podium-top {
|
||||||
|
border: 4rpx solid #c4ccef;
|
||||||
|
width: 128rpx;
|
||||||
|
height: 128rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: relative;
|
||||||
|
background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.9QAjHEaQNNPp85DSJAyhzQAAAA?w=216&h=217&c=7&r=0&o=5&pid=1.7);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
.crownImg {
|
||||||
|
width: 56rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: -42rpx;
|
||||||
|
left: 64rpx;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.podium-bottom {
|
||||||
|
width: 212rpx;
|
||||||
|
height: 201rpx;
|
||||||
|
background-color: #141b17;
|
||||||
|
transform: skewX(-4deg);
|
||||||
|
color: #777c79;
|
||||||
|
font-size: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 34rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.nickname,
|
||||||
|
.mileage {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mileage {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding-right: 10rpx;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.podium-Champion {
|
||||||
|
.podium-top {
|
||||||
|
border: 4rpx solid #efcc7e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.podium-bottom {
|
||||||
|
height: 233rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.podium-thirdPlace {
|
||||||
|
.podium-top {
|
||||||
|
border: 4rpx solid #edc3a1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rankingList,
|
||||||
|
.my-ranking {
|
||||||
|
background-image: linear-gradient(#182626, #010101);
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
padding-bottom: 158rpx;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rankingList-item {
|
||||||
|
padding: 28rpx 40rpx;
|
||||||
|
color: #b8bcbc;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.rankingList-item-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.rank-num {
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 36rpx;
|
||||||
|
width: 78rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
margin-left: 36rpx;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 88rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-profile {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.address {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #7a8181;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rankingList-item-right {
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
.mileage {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-ranking {
|
||||||
|
overflow: visible;
|
||||||
|
flex: 0;
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,588 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="topic-navbar">
|
||||||
|
<uni-nav-bar class="nav-bar" backgroundColor="rgba(255,255,255,0)">
|
||||||
|
<template v-slot:left>
|
||||||
|
<image src="../../../../static/circle/icon_bar01.png" mode="aspectFit" class="image"></image>
|
||||||
|
</template>
|
||||||
|
<template v-slot:right>
|
||||||
|
<image src="../../../../static/circle/icon_bar03.png" mode="aspectFit" class="image"></image>
|
||||||
|
</template>
|
||||||
|
</uni-nav-bar>
|
||||||
|
<view class="topic-header">
|
||||||
|
<view class="topic-header-title">
|
||||||
|
<text>第一次使用爱摩包的感受</text>
|
||||||
|
<view class="watch">
|
||||||
|
<image src="../../../../static/circle/icon_eye.png" mode="aspectFit" class="eye"></image>
|
||||||
|
<text>2890阅读</text>
|
||||||
|
</view>
|
||||||
|
<text class="topic-header-title-num">300人参与 . 219条内容</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="topic-type">
|
||||||
|
<text>热门</text>
|
||||||
|
<text>最新</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="article">
|
||||||
|
<view class="article-item" v-for="(item,index) in topicList" :key="index">
|
||||||
|
<view class="article-item-head">
|
||||||
|
<view class="article-item-head-left">
|
||||||
|
<image src="../../../../static/mine/lv1.png" mode="" class="avatar"></image>
|
||||||
|
<view class="article-item-head-center">
|
||||||
|
<view class="center-head">
|
||||||
|
<text class="center-head-name">金卡纳练习会</text>
|
||||||
|
<image src="../../../../static/common/vip.png" class="vip-img" mode=""></image>
|
||||||
|
</view>
|
||||||
|
<view class="center-foot">
|
||||||
|
<text style="padding-right: 22rpx;">12-31</text>
|
||||||
|
<text>宝马车主发布</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="article-item-head-right">
|
||||||
|
<view class="item-first">
|
||||||
|
<text>关注</text>
|
||||||
|
</view>
|
||||||
|
<image src="../../../../static/circle/icon_list_more.png" mode="aspectFit" class="image">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="article-item-content">
|
||||||
|
<view class="topicList-item">
|
||||||
|
<image src="../../../../static/circle/icon_huati.png" mode="aspectFill"
|
||||||
|
class="topicList-item-iamge">
|
||||||
|
</image>
|
||||||
|
<text class="topicList-item-text">如何有效防止摔车</text>
|
||||||
|
</view>
|
||||||
|
<view class="article-item-content-title">
|
||||||
|
<text>朋友上周推荐的这个骑行软件，数据记录好精准，感觉很不错！</text>
|
||||||
|
</view>
|
||||||
|
<view class="article-item-content-text">
|
||||||
|
1.低速时不要猛捏前刹，避震回弹会使车身重心不稳，女孩子体力小，这种清空很容易摔倒
|
||||||
|
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速！
|
||||||
|
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速!
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view :class="`grid-container${item.url.length<=9?item.url.length:9}`">
|
||||||
|
<view class="grid-item" v-for="(itemchild,indexchild) in item.url" :key="indexchild">
|
||||||
|
<image :lazy-load="true" :src="itemchild" @click="handPreviewImage(item.url)" mode="aspectFill"
|
||||||
|
class="grid-item-iamge">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="article-item-address">
|
||||||
|
<image src="../../../../static/common/icon-address.png" mode="aspectFill" class="image"></image>
|
||||||
|
<text>四川省成都市青龙湖湿地公园</text>
|
||||||
|
</view>
|
||||||
|
<view class="article-item-review">
|
||||||
|
<text>说点什么吧~</text>
|
||||||
|
</view>
|
||||||
|
<view class="article-item-controls">
|
||||||
|
<view class="article-item-controls-left-nav">
|
||||||
|
<image src="../../../../static/common/icon-share.png" mode="aspectFill" class="image"></image>
|
||||||
|
<text>分享</text>
|
||||||
|
</view>
|
||||||
|
<view class="article-item-controls-left-nav">
|
||||||
|
<image src="../../../../static/common/icon-review.png" mode="aspectFill" class="image"></image>
|
||||||
|
<text>评论</text>
|
||||||
|
</view>
|
||||||
|
<view class="article-item-controls-left-nav">
|
||||||
|
<image src="../../../../static/common/icon-upvote.png" mode="aspectFill" class="image"></image>
|
||||||
|
<text>点赞</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</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,
|
||||||
|
topicList
|
||||||
|
} = userData()
|
||||||
|
// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||||
|
let menuButtonTop = rpxTopx(40 + menuButtonInfo.top) + 'rpx'
|
||||||
|
// 计算小程序胶囊顶部位置加底部菜单高度
|
||||||
|
let cssMenuButtonTop = rpxTopx(menuButtonInfo.top) + 88 + 226 + 'rpx'
|
||||||
|
// #endif
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
//隐藏滚动条
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
.topic-navbar {
|
||||||
|
height: 530rpx;
|
||||||
|
width: 100%;
|
||||||
|
background: url(https://rzyx-tycm.bj.bcebos.com/moto/%E8%83%8C%E6%99%AF%E5%9B%BE.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
// padding: 35rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.nav-bar {
|
||||||
|
position: absolute;
|
||||||
|
top: v-bind(menuButtonTop);
|
||||||
|
left: 0;
|
||||||
|
z-index: 99999;
|
||||||
|
height: 88rpx;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .uni-navbar__content {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.topic-header {
|
||||||
|
padding: 228rpx 32rpx 32rpx 32rpx;
|
||||||
|
|
||||||
|
.topic-header-title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
.watch {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 22rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 17rpx;
|
||||||
|
color: #b9c0c3;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topic-header-title-num {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topic-type {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1rpx;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 84rpx;
|
||||||
|
background-color: #f8f9fd;
|
||||||
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
|
padding: 24rpx 46rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #565960;
|
||||||
|
|
||||||
|
:nth-child(2) {
|
||||||
|
margin-left: 50rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.article {
|
||||||
|
// padding: 0 34rpx;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f8f9fd;
|
||||||
|
padding: 0 24rpx 8rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.article-item {
|
||||||
|
padding: 24rpx;
|
||||||
|
border-bottom: 1px solid #f2f2f2;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.article-item-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 76rpx;
|
||||||
|
height: 76rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-item-head-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-item-head-center {
|
||||||
|
margin-left: 16rpx;
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.item-first {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
border: 1px dashed #909090;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-item-content {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.article-item-content-title {
|
||||||
|
padding: 16rpx 0;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #08080D;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-item-content-text {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 234rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #08080D;
|
||||||
|
user-select: text;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 5;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicList-item {
|
||||||
|
// height: 48rpx;
|
||||||
|
background: rgba(54, 103, 189, 0.12);
|
||||||
|
border-radius: 50rpx;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 28rpx 0 0;
|
||||||
|
// display: flex;
|
||||||
|
line-height: 30rpx;
|
||||||
|
|
||||||
|
.topicList-item-iamge {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topicList-item-text {
|
||||||
|
height: 36rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-family: AlibabaPuHuiTi_2_55_Regular;
|
||||||
|
color: #08080D;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// img {
|
||||||
|
// max-width: 100%;
|
||||||
|
// height: auto;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container1 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 532rpx;
|
||||||
|
margin: 28rpx 0;
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
.grid-item-iamge {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container2 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 336rpx;
|
||||||
|
grid-gap: 14rpx;
|
||||||
|
margin: 28rpx 0;
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
.grid-item-iamge {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container3 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 258rpx repeat(3, 1fr) 258rpx;
|
||||||
|
grid-template-rows: 258rpx 258rpx;
|
||||||
|
grid-gap: 14rpx;
|
||||||
|
margin: 28rpx 0;
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
.grid-item-iamge {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
grid-row-start: 1;
|
||||||
|
grid-row-end: 3;
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-column-end: 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container4 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 336rpx 336rpx;
|
||||||
|
grid-gap: 14rpx;
|
||||||
|
margin: 28rpx 0;
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
.grid-item-iamge {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.grid-container5 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 258rpx 258rpx 258rpx;
|
||||||
|
grid-gap: 14rpx;
|
||||||
|
margin: 28rpx 0;
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
.grid-item-iamge {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
grid-row-start: 1;
|
||||||
|
grid-row-end: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container6 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 336rpx 336rpx 336rpx;
|
||||||
|
grid-gap: 14rpx;
|
||||||
|
margin: 28rpx 0;
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
.grid-item-iamge {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container7 {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 28rpx 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
width: 50%;
|
||||||
|
height: 258rpx;
|
||||||
|
padding: 7rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.grid-item-iamge {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3),
|
||||||
|
&:nth-child(4),
|
||||||
|
&:nth-child(5) {
|
||||||
|
width: 33.3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container8 {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 28rpx 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
width: 33.3%;
|
||||||
|
height: 258rpx;
|
||||||
|
padding: 7rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.grid-item-iamge {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(1),
|
||||||
|
&:nth-child(2) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container9 {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 28rpx 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
width: 33.3%;
|
||||||
|
height: 258rpx;
|
||||||
|
padding: 7rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.grid-item-iamge {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-item-address {
|
||||||
|
color: rgba(43, 43, 53, 0.6);
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
vertical-align: bottom;
|
||||||
|
padding: 0 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-item-review {
|
||||||
|
margin: 32rpx 0;
|
||||||
|
height: 64rpx;
|
||||||
|
background: #F7F8FC;
|
||||||
|
border-radius: 9rpx;
|
||||||
|
padding: 10rpx 16rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: rgba(43, 43, 53, 0.4);
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
padding-right: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-item-controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.article-item-controls-left-nav {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #08080D;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-right: 3rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 405 B |
Binary file not shown.
|
After Width: | Height: | Size: 984 B |
Binary file not shown.
|
After Width: | Height: | Size: 170 B |
Binary file not shown.
|
After Width: | Height: | Size: 849 B |
Binary file not shown.
|
After Width: | Height: | Size: 896 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 B |
Binary file not shown.
|
After Width: | Height: | Size: 863 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 910 B |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Loading…
Reference in New Issue