175 lines
4.2 KiB
Vue
175 lines
4.2 KiB
Vue
<template>
|
|
<view>
|
|
<uni-popup ref="popupRef" type="bottom">
|
|
<view class="pop">
|
|
<view class="image">
|
|
<image src="../static/images/f2.png"></image>
|
|
<view class="border"></view>
|
|
</view>
|
|
<view class="white_card">
|
|
<view class="flex">
|
|
<view class="price">￥<text class="pro">10</text>.00</view>
|
|
<view>订货价</view>
|
|
</view>
|
|
<view class="short_name">商品名称</view>
|
|
<view class="shop_name">店铺名称</view>
|
|
<u-line></u-line>
|
|
<view class="m_title">规格选中</view>
|
|
<view class="flex">
|
|
<view class="attr">规格1</view>
|
|
<view class="attr">规格2</view>
|
|
</view>
|
|
<view class="m_title num">
|
|
<view>购买数量</view>
|
|
<view>1</view>
|
|
</view>
|
|
<view>
|
|
商品库存 200
|
|
</view>
|
|
<view class="button">
|
|
<view class="b_icon">
|
|
<image src="@/static/images/icon/car.png"></image>
|
|
<view>采购车</view>
|
|
</view>
|
|
<view class="btn">加入采购清单</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "shortPopup",
|
|
props: ['datas'],
|
|
data() {
|
|
return {
|
|
show: false
|
|
};
|
|
},
|
|
methods: {
|
|
open() {
|
|
this.$refs.popupRef.open();
|
|
},
|
|
close() {
|
|
this.$refs.popupRef.close();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.pop {
|
|
background-color: #fff;
|
|
border-radius: 31.54rpx 31.54rpx 0rpx 0rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.image{
|
|
height: 750rpx;
|
|
width: 750rpx;
|
|
position: relative;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.border{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #fff;
|
|
height: 40rpx;
|
|
width: 100%;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
}
|
|
}
|
|
|
|
.white_card{
|
|
border-radius: 31.54rpx 31.54rpx 0rpx 0rpx;
|
|
background-color: #fff;
|
|
margin: 0 28rpx;
|
|
padding-bottom: 30rpx;
|
|
color: #737373;
|
|
font-size: 26.29rpx;
|
|
|
|
.price{
|
|
font-size: 35rpx;
|
|
font-family: SF Pro Display-Semibold, SF Pro Display;
|
|
font-weight: 600;
|
|
color: #F84221;
|
|
.pro{
|
|
font-size: 49.07rpx;
|
|
}
|
|
}
|
|
.short_name{
|
|
font-size: 33rpx;
|
|
font-family: PingFang SC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
.shop_name{
|
|
display: inline-block;
|
|
background: #FEF5F3;
|
|
padding: 0 16rpx;
|
|
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
|
margin-top: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.m_title{
|
|
font-size: 30rpx;
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
margin-top: 31rpx;
|
|
margin-bottom: 21rpx;
|
|
}
|
|
.attr{
|
|
background: #FEF5F3;
|
|
opacity: 1;
|
|
border: 1rpx solid #F84221;
|
|
padding: 15rpx 30rpx;
|
|
margin-right: 20rpx;
|
|
height: 63rpx;
|
|
border-radius: 63rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.num{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.button{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 20rpx;
|
|
.b_icon{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 19rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
image{
|
|
width: 50.82rpx;
|
|
height: 50.82rpx;
|
|
}
|
|
}
|
|
.btn{
|
|
width: 575rpx;
|
|
height: 84rpx;
|
|
background: linear-gradient(270deg, #FF6D20 0%, #F84221 100%);
|
|
border-radius: 42rpx 42rpx 42rpx 42rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |