xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-11-23 19:06:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Layout fixed

Browse Source
This commit is contained in:
Vion
2022-01-08 20:29:31 +08:00
parent 82e02dbc0b
commit 15c71d6348
24 changed files with 2653 additions and 4390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

865
rc-busness/pages/productdetails/producted.vue
View File

@@ -2,37 +2,43 @@
<div>
<div class="user" v-for="(item,index) in newlist" :key="index">
<Myheader></Myheader>
<div class="rc-usermain" >
<div class="rc-top"></div>
<div class="rc-usermain ts-product-detail">
<magnifier v-bind:parentmsg="msg" ></magnifier>
<div class="rc-header" >
<div class="rc-main" >
<div class="usermain">
<div class="rc-title">
<h2>{{ item.productName }}</h2>
</div>
<div class="productdetails">
<div class="rc-productdetail">
<i>商品价格</i>
<span>￥{{ item.rsp }}</span>
<i style="font-size:12px;color:#999999">￥{{item.ecPrice}}</i>
</div>
<div class="rc-productdetai">
<div>
<i>活动促销:</i>
<span>全场商品限时优惠</span>
</div>
<em @click="userget()">立即领取</em>
</div>
<div class="rc-button" v-if="!userbuy">
<span @click="usertanchu(item,0)">加入购物车</span>
<span @click="usertanchu(item,1)">立即购买</span>
</div>
</div>
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.33rem"></div>
<div class="online"></div>
<div class="rc-main">
<div class="rc-title">
<h2>{{ item.productName }}</h2>
</div>
</div>
<div class="online"></div>
<div class="rc-main">
<div class="productdetails">
<div class="rc-productdetail">
<i>商品价格</i>
<span>￥{{ item.rsp }}</span>
<i style="font-size:12px;color:#999999">￥{{item.ecPrice}}</i>
</div>
<div class="rc-productdetai">
<div>
<i>活动促销:</i>
<span>全场商品限时优惠</span>
</div>
<em @click="userget()">立即领取</em>
</div>
<div class="rc-button" v-if="!userbuy">
<span @click="usertanchu(item,0)">加入购物车</span>
<span @click="usertanchu(item,1)">立即购买</span>
</div>
</div>
</div>
<div class="online"></div>
<div class="rc-productdeta" v-if="userbuy">
<div class="rc-main">
<div class="rc-prodtop">
<div>
<span>商品规格</span>：
@@ -45,46 +51,41 @@
{{ item.specifications }}
</em>
</div>
<div class="rc-produnnum">
<div>
<span>商品数量</span>：
</div>
<img src="../../assets/image/userjian.png" alt="" @click="sub()" />
<strong>{{sales_num}}</strong>
<img
src="../../assets/image/userjia.png" alt="" @click="plus()"
class="rc-message"
/>
</div>
</div>
<div class="online"></div>
<div class="rc-main">
<div class="rc-produnnum">
<div><span>商品数量</span>：</div>
<img src="../../assets/image/userjian.png" alt="" @click="sub()" />
<strong>{{sales_num}}</strong>
<img src="../../assets/image/userjia.png" alt="" @click="plus()" class="rc-message" />
</div>
</div>
<div class="rc-main">
<div class="certification">
<ul>
<li>
<span
>服务说明：<i>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i></span
>
</li>
<li>
<span
>商品运费：<i>全场包邮(港澳除外)</i></span
>
</li>
<div class="certification">
<ul>
<li>
<span
>服务说明：<i>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i></span
>
</li>
<li>
<span
>商品运费：<i>全场包邮(港澳除外)</i></span
>
</li>
<li>
<span
>商品编号：<i>{{ item.brandCode }}</i></span
>
</li>
</ul>
</div>
<li>
<span
>商品编号：<i>{{ item.brandCode }}</i></span
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -462,742 +463,6 @@ usertanchu(item,orderm){
</script>
<style lang="less" scoped>
// 手机端
@media screen and(min-width: 320px) and(max-width:768px) {
.rc-button{
width: 100%;
display: flex;
align-items: center;
position: fixed;
justify-content: center;
height: 60px;
bottom: 0;
background-color: white;
span{
width: 160px;
height: 48px;
background: #E2001A;
border-radius: 30px;
font-size: 16px;
color:#FFFFFF;
display: block;
display: flex;
align-items: center;
justify-content: center;
}
span:last-child{
margin-left: 40px;
}
}
.rc-headera{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
h3{
color:#333333;
font-size: 26px;
}
.rc-title{
img{
width: 96px;
height: 96px;
}
}
.userer{
span{
width: 130px;
height: 40px;
border: 2px solid #E2001A;
border-radius: 30px;
display: block;
color: #E2001A;
line-height: 40px;
margin-top: 42px;
font-size: 14px;
}
i{
font-size: 18px;
font-style: normal;
display: block;
margin-top: 32px;
color: #E1001A;
}
}
}
/deep/.el-dialog {
width: 80%;
position: relative;
}
.rc-discount {
position: relative;
width: 100%;
img {
display: block;
width: 100%;
height: 100%;
}
.rc-contair {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.rc-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #e1001a;
padding-right: 21px;
width: 30%;
float: left;
height: 100%;
i {
font-style: normal;
font-size: 12px;
}
span {
font-size: 26px;
}
strong {
font-style: normal;
font-size: 12px;
display: block;
margin-top: 8px;
}
}
.rc-right {
display: flex;
flex-direction: column;
margin-left: 36px;
justify-content: center;
height: 100%;
i {
font-style: normal;
font-size: 16px;
color: #e1001a;
}
.rc-main {
color: #999999;
font-size: 12px;
}
span {
display: block;
margin-top: 8px;
}
em {
font-style: normal;
}
}
.rc-footer {
display: flex;
justify-content: flex-end;
margin-right: 10px;
span {
width: 72px;
height: 25px;
background: #e2001a;
text-align: center;
line-height: 25px;
font-size: 12px;
color: #ffffff;
margin-bottom: 8px;
border-radius: 100px;
margin-right: 8px;
cursor: pointer;
}
}
}
.active{
border: 2px solid #E2001A;
color:#666666;
cursor: pointer;
font-size: 16px;
}
.unactive{
border: 2px solid #808285;
color:#666666;
cursor: pointer;
font-size: 16px;
}
.rc-footimage{
overflow: hidden;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
margin-top: 20px;
img{
width: 100%;
}
}
.rc-header {
width: 100%;
.rc-main {
width: 92%;
margin: 0 auto;
.rc-title {
height: 85px;
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid #d8d8d8;
h2 {
font-size: 22px;
color: #e1001a;
}
}
.productdetails {
margin-top: 19px;
.rc-productdetail {
display: flex;
align-items: center;
i {
font-style: normal;
font-size: 14px;
color: #333333;
}
span {
font-size: 18px;
margin-left: 8px;
color: #e1001a;
}
}
.rc-productdetai {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
i {
font-style: normal;
font-size: 14px;
color: #333333;
}
span {
font-size: 14px;
color: #666666;
margin-left: 8px;
}
em {
font-size: 14px;
font-style: normal;
margin-left: 68px;
color: #e2001a;
}
}
}
.rc-productdeta {
margin-top: 20px;
.rc-prodtop {
display: flex;
align-items: center;
span {
font-size: 14px;
color: #333333;
}
em {
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
width: 59px;
font-size: 16px;
margin-left: 4px;
height: 39px;
border-radius: 3px;
}
}
}
.rc-produnnum {
display: flex;
align-items: center;
padding-bottom: 20px;
margin-top: 16px;
border-bottom: 1px solid #d7d7d7;
span {
font-size: 14px;
color: #333333;
}
img {
width: 29px;
height: 29px;
display: block;
margin-left: 5px;
}
.rc-message {
width: 29px;
margin-left: 8px;
height: 29px;
display: block;
}
strong {
font-style: normal;
list-style: none;
width: 30px;
height: 30px;
border: 1px solid #d7d7d7;
opacity: 1;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin: 0 5px 0 5px;
color: #666666;
}
}
.certification {
.rc-button{
width: 100%;
padding-top: 33px;
display: flex;
align-items: center;
span{
width: 160px;
height: 48px;
background: #E2001A;
border-radius: 30px;
font-size: 16px;
color:#FFFFFF;
display: block;
display: flex;
align-items: center;
justify-content: center;
}
span:last-child{
margin-left: 40px;
}
}
margin-top: 16px;
ul {
display: flex;
flex-direction: column;
line-height: 30px;
li {
float: left;
width: 100%;
text-align: left;
span {
font-size: 14px;
color: #333333;
}
i{
font-style: normal;
font-size: 14px;
color: #666666;
margin-left: 8px;
}
}
}
}
}
}
}
// /* 最小768px最大1920 *pc端/
@media screen and (min-width: 768px) and (max-width: 1920px) {
.rc-headera{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
h3{
color:#333333;
font-size: 26px;
}
.rc-title{
img{
width: 96px;
height: 96px;
}
}
.userer{
span{
width: 130px;
height: 40px;
border: 2px solid #E2001A;
border-radius: 30px;
display: block;
color: #E2001A;
line-height: 40px;
margin-top: 42px;
font-size: 14px;
}
i{
font-size: 18px;
font-style: normal;
display: block;
margin-top: 32px;
color: #E1001A;
}
}
}
.rc-header{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
h3{
color:#333333;
font-size: 26px;
}
.rc-title{
img{
width: 96px;
height: 96px;
}
}
.userer{
img{
width: 210px;
height: 210px;
display: flex;
justify-content: center;
flex-direction: column;
}
span{
font-size: 16px;
color: #333333;
}
i{
font-size: 18px;
font-style: normal;
display: block;
margin-top: 32px;
color: #E1001A;
}
}
}
/deep/.el-dialog {
width: 440px;
height: 432px;
position: relative;
}
.rc-discount {
position: relative;
img {
display: block;
width: 100%;
height: 100%;
}
.rc-contair {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.rc-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #e1001a;
padding-right: 21px;
width: 30%;
float: left;
height: 100%;
i {
font-style: normal;
font-size: 12px;
}
span {
font-size: 26px;
}
strong {
font-style: normal;
font-size: 12px;
display: block;
margin-top: 8px;
}
}
.rc-right {
display: flex;
flex-direction: column;
margin-left: 36px;
justify-content: center;
height: 100%;
i {
font-style: normal;
font-size: 16px;
color: #e1001a;
}
.rc-main {
color: #999999;
font-size: 12px;
}
span {
display: block;
margin-top: 8px;
}
em {
font-style: normal;
}
}
.rc-footer {
display: flex;
justify-content: flex-end;
margin-right: 10px;
span {
width: 72px;
height: 25px;
background: #e2001a;
text-align: center;
line-height: 25px;
font-size: 12px;
color: #ffffff;
margin-bottom: 8px;
border-radius: 100px;
margin-right: 8px;
cursor: pointer;
}
}
}
.rc-usermain{
display: flex;
align-items: center;
}
.active{
border: 2px solid #E2001A;
color:#666666;
cursor: pointer;
font-size: 16px;
}
.unactive{
border: 2px solid #808285;
color:#666666;
cursor: pointer;
font-size: 16px;
}
.rc-header {
width: 100%;
margin-left: 80px;
.rc-footimage{
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
img{
width: 100%;
}
}
.rc-main {
width: 92%;
margin: 0 auto;
.rc-title {
height: 85px;
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid #d8d8d8;
h2 {
font-size: 30px;
color: #e1001a;
}
}
.productdetails {
.rc-button{
width: 100%;
padding-top: 33px;
display: flex;
align-items: center;
span{
width: 160px;
height: 48px;
background: #E2001A;
border-radius: 30px;
font-size: 16px;
color:#FFFFFF;
display: block;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
span:last-child{
margin-left: 40px;
}
}
margin-top: 19px;
.rc-productdetail {
display: flex;
align-items: center;
i {
font-style: normal;
font-size: 18px;
color: #333333;
}
span {
font-size: 18px;
margin-left: 8px;
color: #e1001a;
}
}
.rc-productdetai {
display: flex;
align-items: center;
margin-top: 10px;
border-bottom: 1px solid #d7d7d7;
padding-bottom: 17px;
i {
font-style: normal;
font-size: 18px;
color: #333333;
}
span {
font-size: 20px;
color: #666666;
margin-left: 8px;
}
em {
font-size: 16px;
font-style: normal;
width: 40%;
text-align: right;
display: block;
color: #E2001A;
cursor: pointer;
}
}
}
.rc-productdeta {
margin-top: 16px;
.rc-prodtop {
display: flex;
align-items: center;
span {
font-size: 18px;
color: #333333;
}
em {
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
width: 59px;
font-size: 16px;
margin-left: 10px;
height: 39px;
border-radius: 3px;
color:#666666;
}
}
}
.rc-produnnum {
display: flex;
align-items: center;
padding-bottom: 20px;
margin-top: 16px;
border-bottom: 1px solid #d7d7d7;
span {
font-size: 18px;
color: #333333;
}
img {
width: 29px;
height: 29px;
display: block;
}
.rc-message {
width: 29px;
margin-left: 8px;
height: 29px;
display: block;
}
strong {
font-style: normal;
list-style: none;
width: 30px;
height: 30px;
border: 1px solid #d7d7d7;
opacity: 1;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin: 0 5px 0 5px;
color: #666666;
}
}
.certification {
.rc-button{
width: 100%;
padding-top: 33px;
display: flex;
align-items: center;
span{
width: 160px;
height: 48px;
background: #E2001A;
border-radius: 30px;
font-size: 16px;
color:#FFFFFF;
display: block;
display: flex;
align-items: center;
justify-content: center;
}
span:last-child{
margin-left: 40px;
}
}
margin-top: 16px;
ul {
display: flex;
flex-direction: column;
line-height:40px;
text-align: left;
li {
width: 100%;
float: left;
span {
font-size: 18px;
color: #333333;
}
i{
font-style: normal;
font-size: 16px;
color: #666666;
margin-left: 8px;
}
}
}
}
}
}
}
@import url("../../assets/css/global.less");
@import url("../../assets/css/producted.less");
</style>