发现页面
CHINAMI-3V5PQ9A\Administrator
parent
9da58db536
commit
0d30d1dd52
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view>
|
||||
<view style="height: 100%;">
|
||||
<view class="circle-title">
|
||||
<view class="circle-title-nav">
|
||||
<view class="circle-title-nav-list">
|
||||
|
|
@ -14,9 +14,9 @@
|
|||
<image src="../../static/common/edit.png" mode="" class="image"></image>
|
||||
</view>
|
||||
<view class="circle-discover">
|
||||
<scroll-view style="height: 100%;" :scroll-top="500" scroll-y="true" class="scroll-Y" refresher-enabled
|
||||
refresher-background="#F8F8FA">
|
||||
<Discover></Discover>
|
||||
<scroll-view style="height: 100%;" scroll-y="true" class="scroll-Y" refresher-enabled scroll-with-animation
|
||||
refresher-background="#F8F8FA" @refresherrestore="refresherrestore">
|
||||
<Discover :resource="topicList"></Discover>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -30,7 +30,9 @@
|
|||
const {
|
||||
navItem,
|
||||
selectNav,
|
||||
handSelectNav
|
||||
handSelectNav,
|
||||
refresherrestore,
|
||||
topicList
|
||||
} = userData()
|
||||
</script>
|
||||
|
||||
|
|
@ -39,19 +41,21 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
background: #F8F8FA;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.circle-title {
|
||||
width: 100%;
|
||||
height: 137rpx;
|
||||
background-image: url(../../static/common/top-bg.png);
|
||||
background-color: #fff;
|
||||
background-size: 100% 100%;
|
||||
// background-position: 100rpx;
|
||||
padding-top: 118rpx;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
z-index: 9999;
|
||||
|
||||
.circle-title-nav {
|
||||
width: 100%;
|
||||
|
|
@ -100,16 +104,19 @@
|
|||
position: fixed;
|
||||
right: 32rpx;
|
||||
bottom: 188rpx;
|
||||
z-index: 9999;
|
||||
|
||||
.image {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.circle-discover {
|
||||
height: 500px;
|
||||
// padding-top: 255rpx;
|
||||
height: calc(100% - 255rpx);
|
||||
overflow-y: scroll;
|
||||
// padding-bottom: -255rpx;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,33 +4,39 @@
|
|||
<text class="hotTopic-title">热门话题</text>
|
||||
<view class="topicList">
|
||||
<view class="topicList-item">
|
||||
<image src="../../../static/common/topic.png" mode="aspectFit" class="topicList-item-iamge"></image>
|
||||
<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="aspectFit" class="topicList-item-iamge"></image>
|
||||
<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
|
||||
</image>
|
||||
<text class="topicList-item-text">10月摩旅最美路线</text>
|
||||
</view>
|
||||
<view class="topicList-item">
|
||||
<image src="../../../static/common/topic.png" mode="aspectFit" class="topicList-item-iamge"></image>
|
||||
<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="aspectFit" class="topicList-item-iamge"></image>
|
||||
<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
|
||||
</image>
|
||||
<text class="topicList-item-text">10月摩旅最美路线</text>
|
||||
</view>
|
||||
<view class="topicList-item">
|
||||
<image src="../../../static/common/topic.png" mode="aspectFit" class="topicList-item-iamge"></image>
|
||||
<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="aspectFit" class="topicList-item-iamge"></image>
|
||||
<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
|
||||
</image>
|
||||
<text class="topicList-item-text">10月摩旅最美路线</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="article">
|
||||
<view class="article-item">
|
||||
<view class="article-item" v-for="(item,index) in dataResource" :key="index">
|
||||
<view class="article-item-head">
|
||||
<image src="../../../static/mine/lv1.png" mode="" class="avatar"></image>
|
||||
<view class="article-item-head-center">
|
||||
|
|
@ -47,15 +53,70 @@
|
|||
<text>关注</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="article-item-head">
|
||||
|
||||
<view class="article-item-content">
|
||||
<view class="article-item-content-title">
|
||||
<text>朋友上周推荐的这个骑行软件，数据记录好精准，感觉很不错！</text>
|
||||
</view>
|
||||
<view class="article-item-content-text">
|
||||
1.低速时不要猛捏前刹，避震回弹会使车身重心不稳，女孩子体力小，这种清空很容易摔倒
|
||||
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速！
|
||||
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速!
|
||||
</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 :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 :src="itemchild" 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">
|
||||
<image src="../../../static/common/icon-review-logo.png" mode="aspectFill" class="image"></image>
|
||||
<text>说点什么吧，评论留言送积分哦！</text>
|
||||
</view>
|
||||
<view class="article-item-controls">
|
||||
<view class="article-item-controls-left">
|
||||
<view class="article-item-controls-left-nav">
|
||||
<image src="../../../static/common/icon-share.png" mode="aspectFill" class="image"></image>
|
||||
<text>235</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 class="article-item-controls-right">
|
||||
<image src="../../../static/common/icon-more.png" mode="aspectFill" class="image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineComponent, getCurrentInstance, toRefs } from "vue"
|
||||
const { proxy } = getCurrentInstance();
|
||||
const dataResource = ref<string[]>()
|
||||
interface Props {
|
||||
resource : string[]
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
resource: Array
|
||||
})
|
||||
dataResource.value = props.resource
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -119,10 +180,15 @@
|
|||
|
||||
.article {
|
||||
background-color: #fff;
|
||||
padding: 34rpx;
|
||||
padding: 0 34rpx;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
.article-item {
|
||||
padding: 54rpx 0 50rpx;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
width: 100%;
|
||||
|
||||
.article-item-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -174,6 +240,308 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.article-item-content {
|
||||
width: 100%;
|
||||
|
||||
.article-item-content-title {
|
||||
padding: 32rpx 0 16rpx;
|
||||
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: 8rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
margin: 28rpx 0 0;
|
||||
|
||||
|
||||
.topicList-item-iamge {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
vertical-align: middle;
|
||||
padding-right: 16rpx;
|
||||
}
|
||||
|
||||
.topicList-item-text {
|
||||
height: 36rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: AlibabaPuHuiTi_2_55_Regular;
|
||||
color: #08080D;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
display: flex;
|
||||
width: 70%;
|
||||
|
||||
.article-item-controls-left-nav {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #08080D;
|
||||
|
||||
.image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
vertical-align: middle;
|
||||
padding-right: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-item-controls-right {
|
||||
.image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
import { ref, onMounted, shallowRef, watchEffect, watch } from 'vue';
|
||||
|
||||
// 动态获取图片
|
||||
// const getAssetsImages = (name) => {
|
||||
// return new URL(`../../../static/mine/${name}.png`, import.meta.url).href
|
||||
// }
|
||||
const getAssetsImages = (url) => {
|
||||
// return new URL(url, import.meta.url).href
|
||||
return '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'
|
||||
}
|
||||
export function userData() {
|
||||
const selectNav = ref<number>(1)
|
||||
const navItem = ref<any>([{ text: '关注', id: 0 }, { text: '发现', id: 1 }, { text: '活动', id: 2 }, { text: '闲置', id: 3 }, { text: '二手车', id: 4 }])
|
||||
|
|
@ -11,9 +12,15 @@ export function userData() {
|
|||
const handSelectNav = function (index : number) {
|
||||
selectNav.value = index
|
||||
}
|
||||
const refresherrestore = function () {
|
||||
console.log(333)
|
||||
}
|
||||
const topicList = ref<any>([{ url: [getAssetsImages('../../../static/common/112.webp')] }, { url: [getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp')] }, { url: [getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp')] }, { url: [getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp')] }, { url: [getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp')] }])
|
||||
return {
|
||||
selectNav,
|
||||
navItem,
|
||||
handSelectNav
|
||||
handSelectNav,
|
||||
refresherrestore,
|
||||
topicList
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 301 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 464 B |
Binary file not shown.
|
After Width: | Height: | Size: 556 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue