From ad309075b7c9fbd5ceb63100b2d530259a990523 Mon Sep 17 00:00:00 2001 From: litthy Date: Fri, 18 Aug 2023 17:40:21 +0800 Subject: [PATCH] feat: style --- src/assets/css/face/single.less | 196 +++++++++++++++-------------- src/assets/img/box.svg | 10 +- src/views/face/Single.vue | 210 +++++++++++++++++--------------- 3 files changed, 214 insertions(+), 202 deletions(-) diff --git a/src/assets/css/face/single.less b/src/assets/css/face/single.less index d341ccf36..097def22e 100644 --- a/src/assets/css/face/single.less +++ b/src/assets/css/face/single.less @@ -72,26 +72,56 @@ .auto(x); } } -.m-single-content-box { - background: #ffffff; - border-radius: 30px; - padding: 10px 20px; - .mb(20px); -} + .m-header { - padding: 10px 0; - text-align: center; + .flex; .mb(10px); + align-items: center; + gap: 20px; + padding: 10px 0; + @media screen and (max-width: @phone) { + .pt(60px); + } + + .m-avatar { + .size(168px); + .flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + .u-avatar { + .db; + .size(120px); + .c-avatar-pic { + .full; + } + } + } + .m-topic { + .pr; + .size(300px,112px); + .fz(14px); + .flex; + .bold; + align-items: center; + justify-content: center; + flex-shrink: 0; + background: url(../../img/topic_bg.svg) center center no-repeat; + background-size: 300px 112px; + color: #fff; + letter-spacing: 1px; + } + .m-header-info { + width: 100%; + color: #000; + } h2 { .fz(28px, 1.5); font-weight: 300; margin: 0; letter-spacing: 0.5px; } - .el-divider__text { - // .color(#888); - font-weight: 300; - } + .u-title { font-weight: 300; margin: 0; @@ -102,13 +132,6 @@ overflow: hidden; height: auto; } - .u-avatar { - .auto(x); - .size(88px); - .db; - .mt(30px); - .mb(20px); - } .u-info { .fz(12px); @@ -214,53 +237,36 @@ } // 头条 - .u-topic { - position: relative; - height: 100px; - margin-top: 10px; - .u-topic-text { - font-size: 14px; - font-weight: 600; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 1; - color: #fff; - letter-spacing: 1px; - } - .u-topic-bg { - width: 300px; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - } } -@media screen and (max-width: @phone) { - .m-header { - .pt(60px); - } +.m-face-content { + .flex; + .pb(40px); + gap: 20px; } - -.m-single-data { - .pb(20px); +.m-single-content-box { + background: #ffffff; + border-radius: 10px; + padding: 20px; + box-sizing: border-box; +} +.m-single-data, +.m-face-pay { + .clip; + .size(565px,500px); + box-sizing: border-box; + flex-shrink: 0; } - .m-single-box { padding: 0; } .m-single-pics { - // .r(3px); - // padding: 20px; - // background: #24292e; .pr; + .size(100%,500px); .u-bg { .pa; - // .z(1); - .size(calc(100% - 40px), calc(100% - 180px)); + .size(calc(100% - 40px)); + .r(10px); box-sizing: border-box; img { .size(100%); @@ -290,51 +296,43 @@ .pt(0); } .m-face-pay { + .pr; .flex; - font-size: 14px; - margin: 20px auto; - box-sizing: border-box; + .fz(14px); + .r(10px); color: #555; - position: relative; - justify-content: center; - height: 200px; - background-image: url("../../img/face_pay_bg.svg"); - background-color: #ffad31; - border-radius: 30px; + background: url("../../img/face_pay_bg.svg") #ffad31; .m-face-pay-info { + .flex; + .fz(16px); + .size(290px,135px); + .r(10px); + align-items: center; + flex-wrap: wrap; + margin: 40px; + box-sizing: border-box; background-color: #fff; - border-radius: 30px; padding: 20px; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - display: flex; - align-items: center; .u-text { - font-weight: 600; - font-size: 20px; color: #ffad31; } .el-tag { + .fz(16px,26px); + .x; + .r(5px); border-color: #ffad31; - border-radius: 12px; - font-weight: 600; - margin-right: 20px; - font-size: 20px; - padding: 9px 15px; - height: 40px; - margin-top: 0; - display: flex; - align-items: center; + padding: 0 20px; + height: 26px; + margin: 0; } .u-btn { + .mt(10px); + .size(100%,40px); + .r(20px); + .fz(16px); background-color: #ff7070; border-color: #ff7070; - border-radius: 12px; - font-weight: 600; - font-size: 20px; &:hover { background-color: lighten(#ff7070, 10%); @@ -344,8 +342,8 @@ z-index: 2; } .u-box-img { - position: absolute; - right: 10px; + .pa; + .rb(-40px,0); z-index: 1; } } @@ -368,7 +366,7 @@ } .m-face-files { - padding-bottom: 20px; + .mb(20px); } .m-face-files-list { list-style: none; @@ -476,7 +474,7 @@ // } } .m-carousel .el-carousel__container { - height: 600px; + height: 450px; } .el-carousel__mask { @@ -503,9 +501,7 @@ .p-face-single .el-input-group__prepend { .none; } - .m-carousel .el-carousel__container { - height: 240px; - } + .m-random-list { .u-list { justify-content: center; @@ -528,3 +524,19 @@ } } } + +.m-desc { + .pb(20px); + .el-divider__text { + .bold; + .fz(18px); + background-color: #f3f5f6; + } + .u-desc { + .db; + .r(10px); + background-color: #fff; + color: #000; + padding: 20px; + } +} diff --git a/src/assets/img/box.svg b/src/assets/img/box.svg index 04064f5a4..cfd3dacf4 100644 --- a/src/assets/img/box.svg +++ b/src/assets/img/box.svg @@ -1,9 +1 @@ - - - - - - - - - + \ No newline at end of file diff --git a/src/views/face/Single.vue b/src/views/face/Single.vue index 99fbc009b..33bb9fa76 100644 --- a/src/views/face/Single.vue +++ b/src/views/face/Single.vue @@ -51,15 +51,18 @@ -->
- -

{{ post.title || "无标题" }}

-
+
+ +
+ +
+

{{ post.title || "无标题" }}

By {{ @@ -75,7 +78,6 @@ 编辑
-
★ 编辑推荐 首发 @@ -85,75 +87,79 @@ showBodyTypeLabel(post.body_type) }}
- -
- {{ topicText }} - -
+
{{ topicText }}
+
+
+ +
+ +
+
+ + +
+ +
+ + +
-
- 预览 - -
- -
+ +
+
+ 该脸型数据售价： + + {{ post.price_count }} 盒币 + {{ post.price_count }} 金箔 + + 购买 +
+
- - -
- -
- - + +
+ 独家数据分析 + +
+
+
说明
{{ post.remark }}
- -
-
- 该脸型数据售价： - - {{ post.price_count }} 盒币 - {{ post.price_count }} 金箔 - - 购买 -
- -
- - -
- 独家数据分析 - -
原始文件列表
  • - 名称: {{ item.name }} - 版本 : {{ item.created_at }} - 备注 ： {{ item.describe }} + 名称: {{ item.name }} + 版本 : {{ item.created_at }} + 备注 ： {{ item.describe }}
    { - let payid = res.data.data.id; - // 轮询接口 - let setIntervalId = setInterval( - loopPayStatus(payid).then((d) => { - this.getPayFaceStatus(d.data.data.pay_status, setIntervalId); - }, 1000) - ); - }).catch(err => { - // 余额不足 - if (err.response?.data?.code == 40019) { - this.$confirm("余额不足，是否前往充值？", "提示", { - confirmButtonText: "确定", - cancelButtonText: "取消", - type: "warning", - }).then(() => { - window.open('/vip/cny', '_blank') - }).catch(() => {}); - } - }).finally(() => { - this.payBtnLoading = false; - }); + payFace(params) + .then((res) => { + let payid = res.data.data.id; + // 轮询接口 + let setIntervalId = setInterval( + loopPayStatus(payid).then((d) => { + this.getPayFaceStatus(d.data.data.pay_status, setIntervalId); + }, 1000) + ); + }) + .catch((err) => { + // 余额不足 + if (err.response?.data?.code == 40019) { + this.$confirm("余额不足，是否前往充值？", "提示", { + confirmButtonText: "确定", + cancelButtonText: "取消", + type: "warning", + }) + .then(() => { + window.open("/vip/cny", "_blank"); + }) + .catch(() => {}); + } + }) + .finally(() => { + this.payBtnLoading = false; + }); }) .catch(() => {}); }, @@ -566,19 +572,21 @@ export default { // 判断是否上过头条 getSliders() { - getSliders('slider', this.post.client, 10, this.post.id).then(res => { + getSliders("slider", this.post.client, 10, this.post.id).then((res) => { if (res.data.data?.list) { // 取创建时间最新的一条 - const list = res.data.data.list.sort((a, b) => dayjs(b.created_at).isAfter(dayjs(a.created_at)) ? 1 : -1); + const list = res.data.data.list.sort((a, b) => + dayjs(b.created_at).isAfter(dayjs(a.created_at)) ? 1 : -1 + ); this.topic_info = list[0]; } - }) + }); }, // 将图片地址替换为cdn resolveImageArr(arr) { - return arr.map(item => resolveImagePath(item)); - } + return arr.map((item) => resolveImagePath(item)); + }, }, };