You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
yanzong_qianduan/pages/goods/detail.vue

790 lines
15 KiB

11 months ago
<template>
10 months ago
<view class="detail">
<view class="head">
<view class="search">
<image src="/static/tabbar/home.png" mode="" class="icon"></image>
<view class="searInput">
10 months ago
<image src="/static/home/search.png" mode="" class="seaIcon" @click="goHome"></image>
10 months ago
<input v-model="searchValue" class="input" focus="true" placeholder="iPhone15" type="text" />
</view>
</view>
<view class="share">
<view class="sp"></view>
<image src="/static/detail/share.png" mode="" class="shareIcon"></image>
</view>
<view class="swiper">
<scroll-view class="goods" scroll-x="true" @scroll="scroll">
<view class="goodsItem" v-for="(item,index) in 4" :key="index">
<image src="/static/detail/tv.png" mode="" class="goodsImg"></image>
<view class="num">
<view class="numSp">
</view>
<view class="numInfo">
{{index+1}}/4
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="goodsInfo">
<view class="goodsPrice">
<view class="left">
<view class="leftPrice">
<text></text>4980
</view>
<view class="sellPrice">
<text class="sellLeft">分销价</text>3999
</view>
</view>
<view class="right">
<view class="rightPrice">
4980
</view>
<view class="rightInfo">
降价通知
</view>
</view>
</view>
<view class="pro">
<view class="proMem">
PRO会员
</view>
<view class="proInfo">
开通PRO会员 预计再省
</view>
<view class="proBtn">
立即开通
</view>
</view>
<view class="goodsDetail">
<view class="goodsName">
夏普4T-M70H7DA 70英寸 4K 高清进口屏智能语音
平板液晶电视机6575
</view>
<view class="goodsOpera">
<view class="goodsNum">
<text>100999080000</text>
<image src="/static/detail/copy.png" mode=""></image>
</view>
<view class="operaImg">
<image src="/static/detail/tip.png" mode="" class="tips"></image>
<image src="/static/detail/ys.png" mode="" class="ys"></image>
</view>
</view>
<view class="rank">
<text>排行榜 手机热搜榜第3名</text>
<image src="/static/detail/rightIcon.png" mode=""></image>
</view>
</view>
</view>
<view class="orderInfo">
<view class="chosed">
<view class="title">已选</view>
<view class="info">枪色 1</view>
</view>
<view class="chosed">
<view class="title">送至</view>
<view class="info">
<view class="infoLeft">
现货
<image src="../../static/detail/rightIcon.png" mode=""></image>
</view>
<view class="address">
河北省秦皇岛市某某区
</view>
</view>
</view>
<view class="chosed">
<view class="serve">
<view class="serveInfo">
服务
</view>
<view class="span">
11 months ago
10 months ago
</view>
</view>
<view class="business">
<view class="busSour">
<text>商家来源平台认证商户</text>
</view>
<view class="busName">
<text>商家名称北京伊莫电子科技有限公司</text>
</view>
</view>
</view>
<view class="chosed">
<view class="title">服务</view>
<image src="/static/detail/buy.png" mode="" class="buy"></image>
<view class="info">枪色 1</view>
</view>
</view>
<view class="about">
<view class="aboutHead">
<view class="aboutSuggest">
相关推荐
</view>
<view class="more">
查看更多
</view>
</view>
<view class="goodsList">
<view class="goodsItem" v-for="(item,index) in 6" :key="index">
<view class="img">
<image src="/static/detail/tv.png" mode="" class="goodsImg"></image>
</view>
<view class="goodsName">
夏普4T-M70H7DA 70
</view>
<view class="price">
2220
</view>
</view>
</view>
</view>
<view class="vacancy">
</view>
<view class="footer">
<view class="footerCus firstBtn">
<view class="cusIcon">
<image src="/static/detail/customer.png" mode=""></image>
</view>
<view class="customer">
客服
</view>
</view>
<view class="footerCus">
<view class="cusIcon">
<image src="/static/detail/collect.png" mode=""></image>
</view>
<view class="customer">
收藏
</view>
</view>
<view class="footerCus ">
<view class="cusIcon">
<image src="/static/detail/car.png" mode=""></image>
</view>
<view class="customer car">
购物车
</view>
</view>
<view class="addCar">
加入购物车
</view>
<view class="buyNow">
立即购买
</view>
</view>
</view>
</template>
11 months ago
<script>
10 months ago
export default {
data() {
return {
searchValue: '',
}
10 months ago
},
methods:{
goHome(){
uni.navigateTo({
url:'/pages/index/index'
})
},
10 months ago
}
}
11 months ago
</script>
<style lang="scss" scoped>
10 months ago
.detail {
width: 100%;
height: 100%;
padding-top: 100rpx;
}
.head {
background-color: #FFF;
width: 100%;
height: 640rpx;
}
.search {
display: flex;
align-items: center;
.icon {
width: 34rpx;
height: 38rpx;
margin: 0 22rpx 0 76rpx;
}
.searInput {
width: 428rpx;
height: 58rpx;
background: #F3F3F3;
border-radius: 60rpx 60rpx 60rpx 60rpx;
opacity: 1;
display: flex;
align-items: center;
.seaIcon {
width: 28rpx;
height: 28rpx;
margin: 0 0 0 26rpx;
}
.input {
flex: 1;
padding-left: 20rpx;
}
}
}
.share {
display: flex;
justify-content: space-between;
margin-top: 28rpx;
.sp {
width: 54rpx;
height: 54rpx;
}
.shareIcon {
width: 54rpx;
height: 54rpx;
margin-right: 28rpx;
}
}
.swiper {
width: 726rpx;
height: 458rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
left: 0;
right: 0;
margin: auto;
.goods {
width: 100%;
height: 100%;
white-space: nowrap;
.goodsItem {
width: 100%;
height: 100%;
display: inline-block;
position: relative;
.goodsImg {
margin-left: 30rpx;
width: 666rpx;
height: 398rpx;
}
.num {
text-align: center;
display: flex;
justify-content: space-between;
.numSp {
width: 82rpx;
height: 56rpx;
}
.numInfo {
width: 82rpx;
height: 56rpx;
background: #262626;
border-radius: 50% 0 0 50%;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 56rpx;
}
}
}
}
}
.goodsInfo {
width: 720rpx;
height: 484rpx;
background: #FFFFFF;
border-radius: 6rpx 6rpx 6rpx 6rpx;
opacity: 1;
margin: 30rpx 0 0 16rpx;
.goodsPrice {
background-image: url('/static/detail/priceback.png');
width: 720rpx;
height: 136rpx;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
.left {
margin: 18rpx 0 0 28rpx;
.leftPrice {
width: 140rpx;
height: 64rpx;
font-size: 46rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 64rpx;
text {
width: 20rpx;
height: 64rpx;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 64rpx;
margin-right: 8rpx;
}
}
.sellPrice {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 34rpx;
.sellLeft {
width: 72rpx;
margin-right: 8rpx;
}
}
}
.right {
margin-right: 50rpx;
.rightPrice {
width: 102rpx;
height: 48rpx;
font-size: 34rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 48rpx;
}
.rightInfo {
width: 136rpx;
height: 44rpx;
font-size: 34rpx;
font-family: YouSheBiaoTiHei;
font-weight: 400;
color: #FFFFFF;
line-height: 34rpx;
}
}
}
.pro {
background-image: url('/static/detail/pro.png');
background-size: 100% 100%;
width: 690rpx;
height: 82rpx;
display: flex;
align-items: center;
margin: 20rpx 0 0 10rpx;
.proMem {
width: 142rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #966542;
line-height: 33rpx;
margin-left: 18rpx;
padding-right: 24rpx;
border-right: 2rpx solid #EFD4B4;
}
.proInfo {
width: 304rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #966542;
line-height: 34rpx;
margin: 0 38rpx 0 26rpx;
}
.proBtn {
width: 126rpx;
height: 50rpx;
background: #9F744D;
border-radius: 82rpx 82rpx 82rpx 82rpx;
opacity: 1;
text-align: center;
line-height: 50rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
}
.goodsDetail {
.goodsName {
width: 672rpx;
height: 80rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 33rpx;
margin: 28rpx 0 0 28rpx;
}
.goodsOpera {
margin-left: 28rpx;
display: flex;
justify-content: space-between;
.goodsNum {
text {
display: inline-block;
width: 168rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #8A8A8A;
line-height: 34rpx;
margin-right: 4rpx;
}
image {
width: 28rpx;
height: 28rpx;
}
}
.operaImg {
image {
width: 49rpx;
height: 49rpx;
}
.tips {
margin-right: 6rpx;
}
}
}
.rank {
margin: 22rpx 0 18rpx 28rpx;
width: 670rpx;
height: 58rpx;
background: #FFF3EE;
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28rpx;
text {
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FF1130;
line-height: 58rpx;
}
image {
width: 14rpx;
height: 14rpx;
}
}
}
}
.orderInfo {
width: 720rpx;
height: 256rpx;
background: #FFFFFF;
border-radius: 6rpx 6rpx 6rpx 6rpx;
opacity: 1;
margin: 16rpx 0 0 20rpx;
padding: 24rpx 22rpx 12rpx 32rpx;
.chosed {
margin-bottom: 18rpx;
display: flex;
align-items: center;
.buy {
width: 112rpx;
height: 22rpx;
margin-right: 10rpx;
}
.title {
width: 48rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #C4C4C4;
line-height: 34rpx;
margin-right: 38rpx;
}
.info {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3D3D3D;
line-height: 34rpx;
display: flex;
align-items: center;
.infoLeft {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FE3636;
line-height: 34rpx;
image {
width: 14rpx;
height: 14rpx;
margin: 0 10rpx 0 8rpx;
}
}
.address {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3D3D3D;
line-height: 34rpx;
}
}
.serve {
.serveInfo {
width: 48rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #C4C4C4;
line-height: 34rpx;
margin-right: 38rpx;
}
.span {
width: 48rpx;
height: 34rpx;
}
}
.business {
.busSour {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3D3D3D;
line-height: 34rpx;
}
.busName {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3D3D3D;
line-height: 34rpx;
}
}
}
}
.about {
width: 720rpx;
height: 730rpx;
background: #FFFFFF;
border-radius: 6rpx 6rpx 6rpx 6rpx;
opacity: 1;
margin: 14rpx 0 0rpx 20rpx;
padding: 24rpx 0 0 36rpx;
.aboutHead {
display: flex;
justify-content: space-between;
.aboutSuggest {
width: 112rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 40rpx;
}
.more {
width: 96rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #909090;
line-height: 34rpx;
margin-right: 20rpx;
}
}
.goodsList {
display: flex;
flex-wrap: wrap;
margin-top: 30rpx;
.goodsItem {
margin-right: 18rpx;
.img {
width: 204rpx;
height: 168rpx;
background: #FBFBFB;
border-radius: 6rpx 6rpx 6rpx 6rpx;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
.goodsImg {
width: 190rpx;
height: 144rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
}
}
.goodsName {
width: 184rpx;
height: 80rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 33rpx;
}
.price {
width: 66rpx;
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ED2B00;
line-height: 38rpx;
}
}
}
}
.vacancy{
width: 100%;
height: 150rpx;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 130rpx;
background: #FFFFFF;
box-shadow: -6rpx 14rpx 48rpx 0rpx rgba(0, 0, 0, 0.25);
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
display: flex;
align-items: center;
text-align: center;
.firstBtn {
margin-left: 60rpx;
}
.footerCus {
margin-right: 44rpx;
.cusIcon {
width: 38rpx;
height: 38rpx;
image {
width: 100%;
height: 100%;
}
}
.customer {
width: 40rpx;
height: 28rpx;
font-size: 20rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3D3D3D;
line-height: 28rpx;
}
.car{
width: 60rpx;
}
}
.addCar{
width: 196rpx;
height: 78rpx;
background: #FF9E2B;
border-radius: 42rpx 42rpx 42rpx 42rpx;
opacity: 1;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 78rpx;
text-align: center;
}
.buyNow{
width: 212rpx;
height: 78rpx;
background: linear-gradient(102deg, #FE5E06 0%, #F3221A 100%);
border-radius: 42rpx 42rpx 42rpx 42rpx;
opacity: 1;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 78rpx;
text-align: center;
margin-left: 8rpx;
}
}
11 months ago
</style>