|
|
@@ -1,23 +1,25 @@
|
|
|
<template>
|
|
|
- <view class="menu-box flex-justify-space">
|
|
|
+ <view class="menu-box display-flex">
|
|
|
<scroll-view scroll-y="true" class="menu-box-left" :scroll-into-view="idMark" :scroll-with-animation='true'>
|
|
|
<view class="menu-type-list-f">
|
|
|
- <view class="menu-type-list fs-28 fc-6 text-align-center" v-for="(item,i) in typeList" :key="i" @click="selectType(item)"
|
|
|
- :class="type === item.type?'bgc-BCEAFF':''" :id="'scroll'+ item.type">
|
|
|
+ <view class="menu-type-list fs-26 box-border-box align-items-center flex-justify-center"
|
|
|
+ v-for="(item,i) in typeList" :key="i" @click="selectType(item)"
|
|
|
+ :class="type === item.type?'bgc-f fc-3 fw-600':'fc-6 fw-400'" :id="'scroll'+ item.type">
|
|
|
{{item.name}}
|
|
|
<view class="menu-type-num fc-f" v-show="item.num > 0">{{item.num > 99?'99+':item.num}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
-
|
|
|
- <scroll-view scroll-y="true" :scroll-with-animation='true' :scroll-into-view="idMark" @scroll="menuScroll">
|
|
|
+
|
|
|
+ <scroll-view :scroll-y="true" :scroll-with-animation='true' :scroll-into-view="idMark" @scroll="menuScroll">
|
|
|
<view class="menu-box-right">
|
|
|
<view class="menu-box-only" v-for="(item,i) in menuList" :key="i" :id="'scroll'+ item.type">
|
|
|
- <view class="mb-18 fs-34 fw-600">{{item.name}}</view>
|
|
|
+ <view class="mb-32 fs-32">{{item.name}}</view>
|
|
|
<view class="menu-list flex-justify-space" v-for="(info,k) in item.list" :key="k">
|
|
|
- <image src="@/static/img/my/bg.png" mode="scaleToFill"></image>
|
|
|
+ <image class="flex-shrink0" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
|
|
|
<view class="menu-list-right">
|
|
|
- <view class="mb-4 text-overflow-ellipsis fs-34 fw-600">[畅销款]奥尔1良烤肉 牛油拌饭[畅销款]奥尔1良烤肉 牛油拌饭[畅销款]奥尔1良烤肉 牛油拌饭[畅销款]奥尔1良烤肉 牛油拌饭</view>
|
|
|
+ <view class="mb-4 goods-name text-overflow-ellipsis fs-34 fw-600">[畅销款]奥尔1良烤肉 牛油拌饭[畅销款]奥尔1良烤肉
|
|
|
+ 牛油拌饭[畅销款]奥尔1良烤肉 牛油拌饭[畅销款]奥尔1良烤肉 牛油拌饭</view>
|
|
|
<view class="mb-20 fw-400 fc-9 fs-24">月销196</view>
|
|
|
<view class="flex-justify-space align-items-flex-end">
|
|
|
<view class="">
|
|
|
@@ -26,50 +28,55 @@
|
|
|
<span class="fs-24 fc-9 fw-400 text-line-through">¥12</span>
|
|
|
</view>
|
|
|
<view class="display-flex align-items-center" v-if="info.spec != 1">
|
|
|
- <view v-show="info.num > 0" class="right-only-right-red fw-500 text-align-center fs-36 fc-f" @click="addred(1,i,k,item)">-</view>
|
|
|
- <view v-show="info.num > 0" class="right-only-right-2 text-align-center fs-28 fw-400">{{info.num}}</view>
|
|
|
- <view class="right-only-right-add fw-500 text-align-center fs-36 fc-f" @click="addred(2,i,k,item)">+</view>
|
|
|
+ <view v-show="info.num > 0"
|
|
|
+ class="right-only-right-red fw-500 text-align-center fs-36 fc-f"
|
|
|
+ @click="addred(1,i,k,item)">-</view>
|
|
|
+ <view v-show="info.num > 0"
|
|
|
+ class="right-only-right-2 text-align-center fs-28 fw-400">{{info.num}}</view>
|
|
|
+ <view class="right-only-right-add fw-500 text-align-center fs-36 fc-f"
|
|
|
+ @click="addred(2,i,k,item)">+</view>
|
|
|
</view>
|
|
|
- <view v-else class="right-only-right text-align-center fw-600 fs-28 fc-f" @click="addred(3,i,k,item)">选规格</view>
|
|
|
+ <view v-else class="right-only-right text-align-center fw-600 fs-28 fc-f"
|
|
|
+ @click="addred(3,i,k,item)">选规格</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
<uni-popup ref="popupGG" type="bottom">
|
|
|
<view class="gg-box flex-index-css">
|
|
|
<view class="flex-justify-space box-border-box p-32">
|
|
|
<view class="fs-32 fw-500 fc-0">商品详情规格</view>
|
|
|
<view class="" @click="addred(4)">
|
|
|
- <uni-icons type="closeempty" size="20" ></uni-icons>
|
|
|
+ <uni-icons type="closeempty" size="20"></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="goods-info flex-justify-space mb-32 box-border-box plr-32">
|
|
|
<image src="@/static/img/my/bg.png" mode="scaleToFill"></image>
|
|
|
<view class="flex-1">
|
|
|
- <view style="width: 446rpx;" class="fw-600 fs-34 text-overflow-ellipsis-one">[畅销款]奥尔1良烤肉牛油拌饭</view>
|
|
|
+ <view style="width: 446rpx;" class="fw-600 fs-34 text-overflow-ellipsis-one">[畅销款]奥尔1良烤肉牛油拌饭
|
|
|
+ </view>
|
|
|
<view class="fw-400 fc-9 fs-24">月销196</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="scroll-view-css box-border-box plr-32">
|
|
|
<view class="" v-for="(item,i) in popData.specList" :key="i">
|
|
|
<view class="fs-32 fw-500 fc-0 mb-32">{{item.specName}}</view>
|
|
|
<view class="flex-wrap-wrap">
|
|
|
- <view class="spec-item text-align-center fs-28"
|
|
|
- :class="info.isSelect?'s-item':'n-item'"
|
|
|
- v-for="(info,k) in item.list" :key="k" @click="select(i,k,item,info)">
|
|
|
+ <view class="spec-item text-align-center fs-28" :class="info.isSelect?'s-item':'n-item'"
|
|
|
+ v-for="(info,k) in item.list" :key="k" @click="select(i,k,item,info)">
|
|
|
{{info.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="pop-buttom box-border-box plr-32">
|
|
|
<view class="flex-justify-space mb-28">
|
|
|
<view class="pop-buttom-left">
|
|
|
@@ -98,41 +105,82 @@
|
|
|
<script>
|
|
|
import tools from "@/service/tools";
|
|
|
export default {
|
|
|
- name:'menu-box',
|
|
|
- data(){
|
|
|
- return{
|
|
|
- idMark:'',//滚动自适应参数
|
|
|
-
|
|
|
- type:1,//分类标识
|
|
|
- typeList:[],
|
|
|
-
|
|
|
- menuList:[],
|
|
|
-
|
|
|
- popData:{
|
|
|
- spec_name:'',
|
|
|
- spec_ids:'',
|
|
|
- spec_list:[],
|
|
|
- specList:[
|
|
|
- {
|
|
|
- specName:'口味',
|
|
|
- specType:1,
|
|
|
- list:[
|
|
|
- {name:'辣1',id:1,isSelect:false},{name:'辣2',id:2,isSelect:false},{name:'辣3',id:3,isSelect:false},{name:'辣4',id:4,isSelect:false},
|
|
|
- ]
|
|
|
+ name: 'menu-box',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ idMark: '', //滚动自适应参数
|
|
|
+
|
|
|
+ type: 1, //分类标识
|
|
|
+ typeList: [],
|
|
|
+
|
|
|
+ menuList: [],
|
|
|
+
|
|
|
+ popData: {
|
|
|
+ spec_name: '',
|
|
|
+ spec_ids: '',
|
|
|
+ spec_list: [],
|
|
|
+ specList: [{
|
|
|
+ specName: '口味',
|
|
|
+ specType: 1,
|
|
|
+ list: [{
|
|
|
+ name: '辣1',
|
|
|
+ id: 1,
|
|
|
+ isSelect: false
|
|
|
+ }, {
|
|
|
+ name: '辣2',
|
|
|
+ id: 2,
|
|
|
+ isSelect: false
|
|
|
+ }, {
|
|
|
+ name: '辣3',
|
|
|
+ id: 3,
|
|
|
+ isSelect: false
|
|
|
+ }, {
|
|
|
+ name: '辣4',
|
|
|
+ id: 4,
|
|
|
+ isSelect: false
|
|
|
+ }, ]
|
|
|
},
|
|
|
{
|
|
|
- specName:'大小',
|
|
|
- specType:2,
|
|
|
- list:[
|
|
|
- {name:'大1',id:5,isSelect:false},{name:'大2',id:6,isSelect:false},{name:'大3',id:7,isSelect:false},{name:'大4',id:8,isSelect:false},
|
|
|
- ]
|
|
|
+ specName: '大小',
|
|
|
+ specType: 2,
|
|
|
+ list: [{
|
|
|
+ name: '大1',
|
|
|
+ id: 5,
|
|
|
+ isSelect: false
|
|
|
+ }, {
|
|
|
+ name: '大2',
|
|
|
+ id: 6,
|
|
|
+ isSelect: false
|
|
|
+ }, {
|
|
|
+ name: '大3',
|
|
|
+ id: 7,
|
|
|
+ isSelect: false
|
|
|
+ }, {
|
|
|
+ name: '大4',
|
|
|
+ id: 8,
|
|
|
+ isSelect: false
|
|
|
+ }, ]
|
|
|
},
|
|
|
{
|
|
|
- specName:'加料',
|
|
|
- specType:3,
|
|
|
- list:[
|
|
|
- {name:'加1',id:9,isSelect:false},{name:'加2',id:10,isSelect:false},{name:'加3',id:11,isSelect:false},{name:'加4',id:12,isSelect:false},
|
|
|
- ]
|
|
|
+ specName: '加料',
|
|
|
+ specType: 3,
|
|
|
+ list: [{
|
|
|
+ name: '加1',
|
|
|
+ id: 9,
|
|
|
+ isSelect: false
|
|
|
+ }, {
|
|
|
+ name: '加2',
|
|
|
+ id: 10,
|
|
|
+ isSelect: false
|
|
|
+ }, {
|
|
|
+ name: '加3',
|
|
|
+ id: 11,
|
|
|
+ isSelect: false
|
|
|
+ }, {
|
|
|
+ name: '加4',
|
|
|
+ id: 12,
|
|
|
+ isSelect: false
|
|
|
+ }, ]
|
|
|
},
|
|
|
]
|
|
|
},
|
|
|
@@ -141,10 +189,9 @@
|
|
|
mounted() {
|
|
|
this.getTypeList();
|
|
|
},
|
|
|
- methods:{
|
|
|
- getTypeList(){
|
|
|
- this.typeList = [
|
|
|
- {
|
|
|
+ methods: {
|
|
|
+ getTypeList() {
|
|
|
+ this.typeList = [{
|
|
|
"category_id": 1,
|
|
|
"name": "爆品推荐",
|
|
|
"type": 1,
|
|
|
@@ -156,41 +203,62 @@
|
|
|
},
|
|
|
]
|
|
|
this.type = this.typeList[0].type;
|
|
|
- this.idMark = 'scroll'+ this.type;
|
|
|
- this.typeList.forEach((v)=>{
|
|
|
+ this.idMark = 'scroll' + this.type;
|
|
|
+ this.typeList.forEach((v) => {
|
|
|
v.num = 0
|
|
|
})
|
|
|
-
|
|
|
- this.menuList = [
|
|
|
- {
|
|
|
- name:'分类1',
|
|
|
- type:1,
|
|
|
- list:[
|
|
|
- {name:1,num:0,spec:1},{name:2,num:0},{name:3,num:0},{name:4,num:0},
|
|
|
- ]
|
|
|
+
|
|
|
+ this.menuList = [{
|
|
|
+ name: '分类1',
|
|
|
+ type: 1,
|
|
|
+ list: [{
|
|
|
+ name: 1,
|
|
|
+ num: 0,
|
|
|
+ spec: 1
|
|
|
+ }, {
|
|
|
+ name: 2,
|
|
|
+ num: 0
|
|
|
+ }, {
|
|
|
+ name: 3,
|
|
|
+ num: 0
|
|
|
+ }, {
|
|
|
+ name: 4,
|
|
|
+ num: 0
|
|
|
+ }, ]
|
|
|
},
|
|
|
{
|
|
|
- name:'分类2',
|
|
|
- type:2,
|
|
|
- list:[
|
|
|
- {name:1,num:0},{name:2,num:0,spec:1},{name:3,num:0},{name:4,num:0},
|
|
|
- ]
|
|
|
+ name: '分类2',
|
|
|
+ type: 2,
|
|
|
+ list: [{
|
|
|
+ name: 1,
|
|
|
+ num: 0
|
|
|
+ }, {
|
|
|
+ name: 2,
|
|
|
+ num: 0,
|
|
|
+ spec: 1
|
|
|
+ }, {
|
|
|
+ name: 3,
|
|
|
+ num: 0
|
|
|
+ }, {
|
|
|
+ name: 4,
|
|
|
+ num: 0
|
|
|
+ }, ]
|
|
|
},
|
|
|
]
|
|
|
},
|
|
|
-
|
|
|
- selectType(item){
|
|
|
- if(this.type != item.type){
|
|
|
+
|
|
|
+ selectType(item) {
|
|
|
+ if (this.type != item.type) {
|
|
|
this.type = item.type;
|
|
|
- this.idMark = 'scroll'+ item.type
|
|
|
+ this.idMark = 'scroll' + item.type
|
|
|
}
|
|
|
},
|
|
|
- menuScroll(){
|
|
|
+ menuScroll() {
|
|
|
let _this = this;
|
|
|
let query = uni.createSelectorQuery().in(this);
|
|
|
- query.selectAll(".menu-box-only").boundingClientRect(data=>{
|
|
|
- data.forEach((v)=>{
|
|
|
- if(v.top < 329&&v.top>0){
|
|
|
+ query.selectAll(".menu-box-only").boundingClientRect(data => {
|
|
|
+ data.forEach((v) => {
|
|
|
+ if (v.top < 329 && v.top > 0) {
|
|
|
_this.idMark = v.id;
|
|
|
let arr = v.id.split('scroll');
|
|
|
_this.type = Number(arr[1]);
|
|
|
@@ -198,172 +266,129 @@
|
|
|
})
|
|
|
}).exec();
|
|
|
},
|
|
|
- addred(type,i,k,item){
|
|
|
- if(type === 1){
|
|
|
+ addred(type, i, k, item) {
|
|
|
+ if (type === 1) {
|
|
|
// 减
|
|
|
this.menuList[i].list[k].num -= 1;
|
|
|
this.setSub(item);
|
|
|
- }else if(type === 2){
|
|
|
+ } else if (type === 2) {
|
|
|
// 加
|
|
|
this.menuList[i].list[k].num += 1;
|
|
|
this.setSub(item);
|
|
|
- }else if(type === 3){
|
|
|
+ } else if (type === 3) {
|
|
|
// 选规格
|
|
|
this.$refs.popupGG.open();
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.$refs.popupGG.close();
|
|
|
}
|
|
|
},
|
|
|
- setSub(item){
|
|
|
+ setSub(item) {
|
|
|
let num = 0;
|
|
|
- item.list.forEach((n)=>{
|
|
|
+ item.list.forEach((n) => {
|
|
|
num += n.num
|
|
|
})
|
|
|
- this.typeList.forEach((v)=>{
|
|
|
- if(v.type == item.type){
|
|
|
+ this.typeList.forEach((v) => {
|
|
|
+ if (v.type == item.type) {
|
|
|
v.num = num
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// -------弹窗选择规格-----------
|
|
|
- select(i,k,item,info){
|
|
|
- if(!info.isSelect){
|
|
|
- item.list.forEach((v)=>{
|
|
|
+ select(i, k, item, info) {
|
|
|
+ if (!info.isSelect) {
|
|
|
+ item.list.forEach((v) => {
|
|
|
v.isSelect = false;
|
|
|
})
|
|
|
info.isSelect = true;
|
|
|
-
|
|
|
- item.list.forEach(v=>{
|
|
|
- this.popData.spec_list.forEach((n,i)=>{
|
|
|
- if(v.id == n){
|
|
|
+
|
|
|
+ item.list.forEach(v => {
|
|
|
+ this.popData.spec_list.forEach((n, i) => {
|
|
|
+ if (v.id == n) {
|
|
|
this.popData.spec_list.splice(i, 1)
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
this.popData.spec_list.push(info.id);
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
info.isSelect = false;
|
|
|
let index = this.popData.spec_list.indexOf(info.id)
|
|
|
this.popData.spec_list.splice(index, 1)
|
|
|
}
|
|
|
this.spec_ids = this.popData.spec_list.join('_')
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .menu-box{
|
|
|
+ .menu-box {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .menu-box-left {
|
|
|
+ width: 160rpx;
|
|
|
height: 100%;
|
|
|
-
|
|
|
- .menu-box-left{
|
|
|
- width: 176rpx;
|
|
|
+ background-color: #F7F8FA;
|
|
|
+ // border-radius: 0rpx 20rpx 0 0rpx;
|
|
|
+
|
|
|
+ .menu-type-list-f {
|
|
|
+ width: 160rpx;
|
|
|
height: 100%;
|
|
|
- background-color: #F7F8FA;
|
|
|
- border-radius: 0rpx 20rpx 0 0rpx;
|
|
|
- .menu-type-list-f{
|
|
|
- width: 176rpx;
|
|
|
- height: 100%;
|
|
|
- .menu-type-list{
|
|
|
- width: 176rpx;
|
|
|
- min-height: 10rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 14rpx 32rpx;
|
|
|
- position: relative;
|
|
|
- .menu-type-num{
|
|
|
- position: absolute;
|
|
|
- top: 2rpx;
|
|
|
- right: 8rpx;
|
|
|
- padding: 0 6rpx;
|
|
|
- min-width: 20rpx;
|
|
|
- height: 32rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 32rpx;
|
|
|
- background: #FB3D03;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
+
|
|
|
+ .menu-type-list {
|
|
|
+ width: 160rpx;
|
|
|
+ min-height: 108rpx;
|
|
|
+ padding: 18rpx 28rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .menu-type-num {
|
|
|
+ position: absolute;
|
|
|
+ top: 2rpx;
|
|
|
+ right: 8rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
+ min-width: 20rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32rpx;
|
|
|
+ background: #FB3D03;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .menu-box-right{
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 16rpx;
|
|
|
- .menu-list{
|
|
|
- width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-box-right {
|
|
|
+ // flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .menu-list {
|
|
|
+ width: 100%;
|
|
|
+ // height: 200rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 200rpx;
|
|
|
height: 200rpx;
|
|
|
- margin-bottom: 40rpx;
|
|
|
- image{
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- margin-right: 16rpx;
|
|
|
- }
|
|
|
- .menu-list-right{
|
|
|
- flex: 1;
|
|
|
- .right-only-right{
|
|
|
- width: 100rpx;
|
|
|
- height: 44rpx;
|
|
|
- background: linear-gradient( 117deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
- border-radius: 12rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- }
|
|
|
- .right-only-right-red{
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- border: 1rpx solid #41ABF5;
|
|
|
- color: #41ABF5;
|
|
|
- }
|
|
|
- .right-only-right-add{
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- background: linear-gradient( 117deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
- border-radius: 12rpx;
|
|
|
- }
|
|
|
- .right-only-right-2{
|
|
|
- min-width: 50rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .gg-box{
|
|
|
- width: 750rpx;
|
|
|
- height: 1208rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
|
- .goods-info{
|
|
|
- border-bottom: 1rpx solid #EEEEEE;
|
|
|
- image{
|
|
|
- width: 170rpx;
|
|
|
- height: 160rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- margin-right: 22rpx;
|
|
|
- margin-bottom: 32rpx;
|
|
|
- }
|
|
|
+ border-radius: 12rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
}
|
|
|
- .pop-buttom{
|
|
|
- width: 100%;
|
|
|
- height: 250rpx;
|
|
|
- box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51,51,51,0.1);
|
|
|
- .pop-buttom-left{
|
|
|
- padding-top: 12rpx;
|
|
|
- }
|
|
|
- .pop-buttom-2{
|
|
|
- width: 100%;
|
|
|
- height: 96rpx;
|
|
|
- line-height: 96rpx;
|
|
|
- background: #41ABF5;
|
|
|
- border-radius: 200rpx
|
|
|
+
|
|
|
+ .menu-list-right {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .right-only-right {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
+ border-radius: 12rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
}
|
|
|
- .right-only-right-red{
|
|
|
+
|
|
|
+ .right-only-right-red {
|
|
|
width: 44rpx;
|
|
|
height: 44rpx;
|
|
|
line-height: 40rpx;
|
|
|
@@ -371,37 +396,105 @@
|
|
|
border: 1rpx solid #41ABF5;
|
|
|
color: #41ABF5;
|
|
|
}
|
|
|
- .right-only-right-add{
|
|
|
+
|
|
|
+ .right-only-right-add {
|
|
|
width: 44rpx;
|
|
|
height: 44rpx;
|
|
|
line-height: 40rpx;
|
|
|
- background: linear-gradient( 117deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
+ background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
border-radius: 12rpx;
|
|
|
}
|
|
|
- .right-only-right-2{
|
|
|
+
|
|
|
+ .right-only-right-2 {
|
|
|
min-width: 50rpx;
|
|
|
}
|
|
|
}
|
|
|
- .spec-item{
|
|
|
- width: 210rpx;
|
|
|
- height: 66rpx;
|
|
|
- line-height: 66rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 12rpx;
|
|
|
- margin: 0 26rpx 26rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .gg-box {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 1208rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
|
+
|
|
|
+ .goods-info {
|
|
|
+ border-bottom: 1rpx solid #EEEEEE;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 170rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-right: 22rpx;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pop-buttom {
|
|
|
+ width: 100%;
|
|
|
+ height: 250rpx;
|
|
|
+ box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
|
|
|
+
|
|
|
+ .pop-buttom-left {
|
|
|
+ padding-top: 12rpx;
|
|
|
}
|
|
|
- .spec-item:nth-child(3){
|
|
|
- margin-right: 0rpx !important;
|
|
|
+
|
|
|
+ .pop-buttom-2 {
|
|
|
+ width: 100%;
|
|
|
+ height: 96rpx;
|
|
|
+ line-height: 96rpx;
|
|
|
+ background: #41ABF5;
|
|
|
+ border-radius: 200rpx
|
|
|
}
|
|
|
- .s-item{
|
|
|
- background-color: #ECF7FE;
|
|
|
- border: 2rpx solid #41ABF5;
|
|
|
+
|
|
|
+ .right-only-right-red {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ border: 1rpx solid #41ABF5;
|
|
|
color: #41ABF5;
|
|
|
}
|
|
|
- .n-item{
|
|
|
- border: 2rpx solid #EEEEEE;
|
|
|
- color: #000;
|
|
|
+
|
|
|
+ .right-only-right-add {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
+ border-radius: 12rpx;
|
|
|
}
|
|
|
+
|
|
|
+ .right-only-right-2 {
|
|
|
+ min-width: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .spec-item {
|
|
|
+ width: 210rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ line-height: 66rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ margin: 0 26rpx 26rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .spec-item:nth-child(3) {
|
|
|
+ margin-right: 0rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s-item {
|
|
|
+ background-color: #ECF7FE;
|
|
|
+ border: 2rpx solid #41ABF5;
|
|
|
+ color: #41ABF5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .n-item {
|
|
|
+ border: 2rpx solid #EEEEEE;
|
|
|
+ color: #000;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+ .goods-name{
|
|
|
+ max-width: 310rpx;
|
|
|
+ }
|
|
|
</style>
|