From 6fe7499eb09e8a55b797a2f3f6e84938bde1ec48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com> Date: Tue, 6 Sep 2022 17:54:31 +0800 Subject: [PATCH] =?UTF-8?q?=E8=90=BD=E5=9C=B0=E9=A1=B5=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E5=88=A0=E9=99=A4=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E7=BC=96=E5=86=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../edittemplate/goodstemplate.js | 5 + .../edittemplate/goodstemplate.less | 274 +++++++++++------- src/pages/exchangepage/edittemplate/main.less | 6 +- 3 files changed, 176 insertions(+), 109 deletions(-) diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js index ec00ed6b..756c564f 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.js +++ b/src/pages/exchangepage/edittemplate/goodstemplate.js @@ -44,6 +44,11 @@ export default class edittemplate extends React.Component { goodsConfig.bottomBar? :null } +
+ 搜索 + | + +
) } diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less index 654fde35..d83e8f63 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.less +++ b/src/pages/exchangepage/edittemplate/goodstemplate.less @@ -1,87 +1,131 @@ -.goodstemplate,.detailstemplate{ +.goodstemplate, +.detailstemplate { height: 653px; - background: #F2F7F8; - position: relative; - overflow-y: auto; - overflow-x: hidden; - >.preBtn{ - position: absolute; - width: 28px; - height: 28px; - top: 2%; - z-index: 5; - left:4%; - } - >.topbanner{ - width:100%; - height: 187px; - } - >.content-title{ - position: relative; - z-index: 999; - height: 40px; - line-height: 40px; - margin-bottom: 50px; - padding:0 13px; - } - >.goodsPic,>.goodsPicMatrax{ - width:349px; - height: 195px; - margin-left:13px; + background: #F2F7F8; position: relative; - margin-top: -50px; - } - >.goodsPicMatrax{ - height: auto; - } - >.exchageBtn{ - display: flex; - align-items: center; - justify-content: center; - width:349px; - color: #fff; - background: #E8EAEC; - border-radius: 44px; - height: 44px; - margin:30px 0 0 13px; - &.bottomBtn{ - position: fixed; - top:695px; + // overflow-y: auto; + // overflow-x: auto; + + >.preBtn { + position: absolute; + width: 28px; + height: 28px; + top: 2%; + z-index: 5; + left: 4%; + } + + >.topbanner { + width: 100%; + height: 187px; + } + + >.content-title { + position: relative; + z-index: 999; + height: 40px; + line-height: 40px; + margin-bottom: 50px; + padding: 0 13px; + } + + >.goodsPic, + >.goodsPicMatrax { + width: 349px; + height: 195px; + margin-left: 13px; + position: relative; + margin-top: -50px; + } + + >.goodsPicMatrax { + height: auto; + } + + >.exchageBtn { + display: flex; + align-items: center; + justify-content: center; + width: 349px; + color: #fff; + background: #E8EAEC; + border-radius: 44px; + height: 44px; + margin: 30px 0 0 13px; + + &.bottomBtn { + position: fixed; + top: 695px; + } + } + + .susactive_tip { + position: absolute; + top: 40px; + right: 0; + width: 30px; + // height: 70px;s + cursor: pointer; + } + + .bottomactiveTip { + width: 375px; + margin: 10px 0; + padding: 24px 20px 60px; + box-sizing: border-box; + background: #fff; + border-radius: 4px; + box-shadow: 1px 1px 13px 2px #f1f2f3; + line-height: 1.5rem; + + p { + width: 335px; + } + } + + .delete-component { + display: flex; + position: absolute; + top: 193.2px; + right: -5px; + -ms-flex-align: center; + align-items: center; + padding: 6px 8px; + border-radius: 2px; + background: #fff; + font-size: 14px; + -webkit-transform: translate3d(100%, 64px, 0); + transform: translate3d(100%, 64px, 0); + &:before{ + position: absolute; + left: 0; + top: 50%; + border-width: 5px 6px 5px 0; + border-style: solid; + border-color: transparent #fff transparent transparent; + content: ""; + -webkit-transform: translate3d(-100%,-50%,0); + transform: translate3d(-100%,-50%,0); + } + .split{ + padding: 0 5px; + } } - } - .susactive_tip{ - position: absolute; - top: 40px; - right: 0; - width: 30px; - // height: 70px;s - cursor: pointer; - } - .bottomactiveTip{ - width: 375px; - margin:10px 0; - padding: 24px 20px 60px; - box-sizing: border-box; - background: #fff; - border-radius: 4px; - box-shadow: 1px 1px 13px 2px #f1f2f3; - line-height: 1.5rem; - p{ - width: 335px; - } - } } -.goodstemplate{ - .bottomactiveTip{ + +.goodstemplate { + .bottomactiveTip { width: 350px; - margin:12.5px; - p{ + margin: 12.5px; + + p { width: 310px; } } - .searchBar{ + + .searchBar { width: 80%; - margin-left:10%; + margin-left: 10%; margin-top: 2%; height: 40px; line-height: 40px; @@ -92,31 +136,37 @@ } } -.detailstemplate{ +.detailstemplate { position: relative; background: #fff; padding-bottom: 20px; - .detail_bottomImg{ + + .detail_bottomImg { width: 100%; padding-bottom: 30px; } - .topBanner{ + + .topBanner { width: 100%; height: 373px; } - .splitLine{ + + .splitLine { width: 100%; height: 3px; background: #f1f2f3; } - .splitLine:last-of-type{ + + .splitLine:last-of-type { margin-bottom: 20px; } - .iptbg{ + + .iptbg { width: 100%; } - .exchangeBtn{ - width:348px; + + .exchangeBtn { + width: 348px; height: 44px; border-radius: 22px; display: flex; @@ -129,9 +179,11 @@ color: #fff; } } -.activeTip{ + +.activeTip { position: relative; - .imgTip{ + + .imgTip { position: absolute; top: 50%; left: 60px; @@ -141,23 +193,28 @@ font-size: 20px; } } -.bottomTip{ + +.bottomTip { width: 100%; margin-top: 10px; } -.bottomTipview{ + +.bottomTipview { margin-bottom: 30px; } -.desc-goods{ + +.desc-goods { background: #fff; - .descript{ + + .descript { padding: 30px 24px; box-sizing: border-box; line-height: 1.5rem; background: #fff; - color: #45464b!important; + color: #45464b !important; } - >p{ + + >p { width: 100%; height: 50px; background: #f7f8f9; @@ -168,32 +225,37 @@ font-size: 16px; } } + //商品详情页区分立减金/权益 -.details_type{ +.details_type { position: relative; top: 55px; left: 0; - width: 375px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: center; - .zent-radio-button[data-zv="9.12.7"] { - width: 100px; - } + width: 375px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + + .zent-radio-button[data-zv="9.12.7"] { + width: 100px; + } } + /*商品详情页-立减金*/ -.details-reduce{ +.details-reduce { background: #fff; position: relative; - .reduce-pic{ + + .reduce-pic { width: 100%; - position: absolute!important; - left:0; + position: absolute !important; + left: 0; z-index: 1; } } + //优惠券图片 -.picture{ +.picture { width: 100%; -} +} \ No newline at end of file diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less index 506085b1..ee37bd6c 100644 --- a/src/pages/exchangepage/edittemplate/main.less +++ b/src/pages/exchangepage/edittemplate/main.less @@ -14,7 +14,7 @@ right: 0; } .xj-center-small{ - margin: 0 485px 0 550px; + margin: 0 448px 0 490px; } .perimg { position: absolute; @@ -43,7 +43,6 @@ // height: 400px; width: 375px; margin-bottom: 200px; - } .editor-main:before { @@ -479,7 +478,7 @@ #leftComponent { position: fixed; - width: 350px; + width: 300px; height: 100%; background: #fff; @@ -699,6 +698,7 @@ .bottomBar-view>li>span{ font-size: 6px; } + } }