odjbin/pupil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dengjie commit : 完善我的页面和我的发布页面样式初步完成

Browse Source
This commit is contained in:
clay
2022-12-22 21:49:44 +08:00
parent 35203f0d42
commit 02e6961b06
25 changed files with 409 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
pages/detail/productsDetail/productsDetail.vue
View File

@@ -1,13 +1,20 @@
<template>
<view>
<view v-for="(item,index) in detailList" :key="index">
<u-swiper :list="swiperList" indicatorMode="line " width="750rpx" height="530rpx" radius="0" circular>
</u-swiper>
<view class="collect">
<u-icon :name="like?'heart-fill':'heart'" color="#FEAA19" size="23" @click.stop="likeTap"></u-icon>
<view class="collect_text">收藏</view>
<view class="star">
<u-image v-if="showStar==false" src="/static/detail/xp_icon_wstar.png" width="28rpx" height="28rpx"
@click="starTap">
</u-image>
<u-image v-if="showStar==true" src="/static/detail/xp_icon_star.png" width="28rpx" height="28rpx"
@click="starTap">
</u-image>
</view>
<u-image src="/static/detail/xiangqing_icon_shoucang.png" width="119rpx" height="48rpx">
</u-image>
</view>
<view class="content">
@@ -21,12 +28,30 @@
<view class="classify">
{{item.classify}}
</view>
<view class="tagOne">{{item.tagOne}}</view>
<view class="tagTwo">{{item.tagTwo}}</view>
<view class="tag_view">
<view>
<text class="tagOne">{{item.tagOne}}</text>
<text class="tagTwo">{{item.tagTwo}}</text>
</view>
<view v-if="isThumb==false" class="heart">
<u-image v-if="showHeart==false" src="/static/detail/xp_icon_heart.png" width="34rpx"
height="32rpx" @click="heartTap">
</u-image>
<u-image v-if="showHeart==true" src="/static/detail/xp_icon_ysc.png" width="34rpx"
height="32rpx" @click="heartTap">
</u-image>
<text class="thumb">点赞</text>
</view>
<view v-if="isThumb==true" class="heart">
<u-image src="/static/detail/xp_icon_ysc.png" width="34rpx" height="32rpx" @click="heartTap">
</u-image>
<text class="thumb">122赞</text>
</view>
</view>
</view>
<view class="releaseDate">
<u-image src="/static/products/sy_icon_sjf.png" width="24rpx" height="24rpx" :lazy-load="true">
<u-image src="/static/products/xp_icon_sjf.png" width="24rpx" height="24rpx">
</u-image>
<text class="release">发布日期：</text>
<text>{{item.time}}</text>
@@ -41,14 +66,15 @@
export default {
data() {
return {
like: false,
showStar: false,
showHeart: false,
isThumb: true,
detailList: [{
// src: '/static/detail/zhanwei_xppx.png',
title: '锅巴',
tag: '零食铺子',
desc: '糯米蟹黄锅巴散装，非油炸绿色健康食品',
classify: '薯片膨化',
tagOne: '无添加剂',
tagOne: '无添加剂1',
tagTwo: '无添加剂',
time: '2022年12月04日',
content: '<h1>一级标题</h1><br/><h2>二级标题</h2>'
@@ -60,8 +86,13 @@
}
},
methods: {
likeTap() {
this.like = !this.like
//收藏按钮
starTap() {
this.showStar = !this.showStar
},
//点赞按钮
heartTap() {
this.showHeart = !this.showHeart
}
}
}
@@ -73,17 +104,20 @@
position: absolute;
top: 16rpx;
right: 0;
background-color: #a6a6a6;
color: #fff;
border-radius: 54rpx 0px 0px 54rpx;
padding: 2px 2px 2px 3px;
.collect_text {
font-size: 26rpx;
padding: 1px;
.star {
position: absolute !important;
top: 6px !important;
right: 77rpx;
z-index: 99;
}
}
.content {
padding: 20rpx;
background-color: #fff;
@@ -140,25 +174,35 @@
padding: 1rpx 15rpx;
}
.tagOne {
.tag_view {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 14rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #CCCCCC;
line-height: 28rpx;
float: left;
padding-top: 14rpx;
padding-right: 20rpx;
.tagOne {
padding-right: 20rpx;
}
.heart {
display: flex;
.thumb {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 33rpx;
margin-left: 14rpx;
}
}
}
.tagTwo {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #CCCCCC;
line-height: 28rpx;
padding-top: 14rpx;
}
}
.releaseDate {