like
/
customAgent
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

产品消息样式优化

Browse Source
master
wujingling0908 6 days ago
parent f2f01d3c41
commit f1205c344f
3 changed files with 132 additions and 71 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/images/chat/base-tag.svg
  2. 3
      src/assets/style/chat.css
  3. 199
      src/components/product/index.vue

1
src/assets/images/chat/base-tag.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

3
src/assets/style/chat.css
Unescape View File

@ -180,7 +180,8 @@ img.avatarUrl-img[lazy="loading"] {
} }
.noPadding{ .noPadding{
padding: 0 !important; padding: 0 !important;
border-radius: 30rem !important; border-radius: 12rem !important;
background: linear-gradient(360deg, #ffffffb3 0%, #f7f8ff 99%) !important;
} }
.content-left-main.text-folding-box { .content-left-main.text-folding-box {
padding: 11rem 14rem 0 14rem !important; padding: 11rem 14rem 0 14rem !important;

199
src/components/product/index.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="product_body"> <div class="product_body">
<div :class="{ hiddenMore: showTotal }" class="bg_white" ref="productEl"> <div :class="{ hiddenMore: showTotal }" ref="productEl">
<!-- 产品头部 --> <!-- 产品头部 -->
<div class="product_top"> <div class="product_top">
<div class="title_body"> <div class="title_body">
@ -28,6 +28,7 @@
<div class="product_main"> <div class="product_main">
<div class="product_modules"> <div class="product_modules">
<div class="base_module"> <div class="base_module">
<div class="tag"></div>
<!-- 列表集合 --> <!-- 列表集合 -->
<div class="list" v-for="item in baseModuleData" :key="item.id" v-show="!!item.val"> <div class="list" v-for="item in baseModuleData" :key="item.id" v-show="!!item.val">
<div class="list_label">{{ item.key }}:</div> <div class="list_label">{{ item.key }}:</div>
@ -42,19 +43,25 @@
<!-- 保险责任 --> <!-- 保险责任 -->
<div class="more_module"> <div class="more_module">
<div class="top_right_bg"> <div class="top_right_bg">
<div class="tag">保险责任</div>
<!-- 列表集合 --> <!-- 列表集合 -->
<div class="list" v-for="item in resultData.insDuty" :key="item.key"> <div class="list" v-for="item in resultData.insDuty" :key="item.key">
<div class="list_label"> <div class="list_label">
<span class="list_label_span"> <span class="list_label_span"> {{ item.key }}: </span>
{{ item.key }}:
</span>
</div> </div>
<div class="list_content" v-if="item.isRender" v-html="item.completedData"></div> <div class="list_content" v-if="item.isRender" v-html="item.completedData"></div>
<div class="list_content" v-else> <div class="list_content" v-else>
<template v-for="(completedItem, cIdx) in item.completedData" :key="cIdx"> <template v-for="(completedItem, cIdx) in item.completedData" :key="cIdx">
<span class="more_text" v-if="typeof completedItem === 'string'" <span
v-html="completedItem"></span> class="more_text"
<span class="more_button" v-else @click="showImgPopup(completedItem.urlValue)"> v-if="typeof completedItem === 'string'"
v-html="completedItem"
></span>
<span
class="more_button"
v-else
@click="showImgPopup(completedItem.urlValue)"
>
{{ completedItem.urlkey }} {{ completedItem.urlkey }}
</span> </span>
</template> </template>
@ -68,28 +75,48 @@
<!-- 产品底部 --> <!-- 产品底部 -->
<div class="product_bottom"> <div class="product_bottom">
<div class="bottom_modules"> <div class="bottom_modules">
<div class="img_module" :class="bottomModuleNum ? 'min_witch' : ''" v-show="!!item.url" <div
v-for="item in bottomModulesData" :key="item.id"> class="img_module"
:class="bottomModuleNum ? 'min_witch' : ''"
v-show="!!item.url"
v-for="item in bottomModulesData"
:key="item.id"
>
<img @click="clickBottomBtn(item.name)" :src="item.src" /> <img @click="clickBottomBtn(item.name)" :src="item.src" />
</div> </div>
</div> </div>
</div> </div>
<!-- 关联问 --> <!-- 关联问 -->
<div class="content-question-answer" v-if="intents && intents.length > 0"> <div class="content-question-answer" v-if="intents && intents.length > 0">
<button :class="hasClicked ? 'answer-items setGrey' : 'answer-items'" <button
v-for="(items, index) in intents" :key="index" @click.stop="richCallAnswer(items)"> :class="hasClicked ? 'answer-items setGrey' : 'answer-items'"
v-for="(items, index) in intents"
:key="index"
@click.stop="richCallAnswer(items)"
>
{{ items.intent }} {{ items.intent }}
</button> </button>
</div> </div>
</div> </div>
<!-- 展开拉起 --> <!-- 展开拉起 -->
<div class="unfold-box" :class="exchangeButton ? 'unfold-bg' : 'unfold-style'" v-if="showExchangeButton"> <div
<a href="javascript:;" @click="showTotalIntro">{{ exchangeButton ? "展开" : "收起" class="unfold-box"
}}<em class="look-more-icon" :class="!exchangeButton ? 'active' : ''"></em></a> :class="exchangeButton ? 'unfold-bg' : 'unfold-style'"
v-if="showExchangeButton"
>
<a href="javascript:;" @click="showTotalIntro"
>{{ exchangeButton ? '展开' : '收起'
}}<em class="look-more-icon" :class="!exchangeButton ? 'active' : ''"></em
></a>
</div> </div>
<!-- 弹出层 --> <!-- 弹出层 -->
<van-popup class="popup" :style="{ height: '85%', borderRadius: '10rem 10rem 0rem 0rem' }" <van-popup
v-model:show="popUpFlag" teleport="body" position="bottom"> class="popup"
:style="{ height: '85%', borderRadius: '10rem 10rem 0rem 0rem' }"
v-model:show="popUpFlag"
teleport="body"
position="bottom"
>
<div class="detaill_body"> <div class="detaill_body">
<div class="detaill_title"> <div class="detaill_title">
{{ detaillTitle }} {{ detaillTitle }}
@ -98,8 +125,12 @@
<div class="detaill_content" v-show="nowPopType === 'tkyw'"> <div class="detaill_content" v-show="nowPopType === 'tkyw'">
<div v-html="tkywValue"></div> <div v-html="tkywValue"></div>
</div> </div>
<img :style="{ width: '100%', maxWidth: 'none' }" class="product_img" :src="productImgUrl" <img
v-if="!!productImgUrl && nowPopType === 'img'" /> :style="{ width: '100%', maxWidth: 'none' }"
class="product_img"
:src="productImgUrl"
v-if="!!productImgUrl && nowPopType === 'img'"
/>
</div> </div>
</van-popup> </van-popup>
</div> </div>
@ -292,8 +323,17 @@ function showGraph(item) {
<style lang="scss" scoped> <style lang="scss" scoped>
.hiddenMore { .hiddenMore {
height: 205rem; height: 205rem;
overflow: hidden;
}
.unfold-box {
height: 52rem;
background: linear-gradient(0deg, #ffffff 56%, #ffffff4d 103%);
backdrop-filter: blur(16rem);
font-family: PingFang SC;
font-size: 12rem;
font-weight: 500;
color: #025cea;
} }
.product_body { .product_body {
line-height: normal; line-height: normal;
letter-spacing: 0.5rem; letter-spacing: 0.5rem;
@ -304,32 +344,32 @@ function showGraph(item) {
margin-bottom: 6rem; margin-bottom: 6rem;
.bg_white { .bg_white {
background: #fff;
border-radius: 8rem; border-radius: 8rem;
overflow: hidden; overflow: hidden;
} }
.product_top { .product_top {
color: #fff;
border-bottom: #f0ecec 0.01rem solid;
.title_body { .title_body {
font-size: 13rem; font-size: 18rem;
font-weight: 600;
width: 100%; width: 100%;
min-height: 0.5rem; min-height: 0.5rem;
background-image: url('../../assets/images/product/banner.png'); // background: linear-gradient(96deg, #055deae6 4%, #137cfee6 55%, #d5dffbe6 125%);
// border-image: linear-gradient(105deg, #c9dcff 47%, #ffffffb0 111%) 1;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 0.36rem 0.36rem 0 0; border-radius: 0.36rem 0.36rem 0 0;
padding: 8rem; padding: 8rem 16rem;
display: flex; display: flex;
align-items: center; align-items: center;
.title { .title {
font-size: 15rem; font-size: 16rem;
color: #17204d;
font-family: PingFang SC;
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 500; font-weight: 600;
position: relative; position: relative;
.text_content { .text_content {
@ -338,13 +378,15 @@ function showGraph(item) {
} }
.mark { .mark {
font-size: 12rem;
background: #fff;
letter-spacing: 0rem; letter-spacing: 0rem;
color: #4f95fd; background: rgba(76, 101, 245, 0.08);
padding: 0rem 4rem 0rem 4rem; color: #025cea;
border-radius: 5rem 5rem 5rem 0rem; padding: 2rem 6rem;
font-weight: 700; border-radius: 4rem;
font-family: PingFang SC;
font-size: 12rem;
font-weight: 500;
line-height: 16rem;
position: absolute; position: absolute;
top: 1rem; top: 1rem;
right: -4rem; right: -4rem;
@ -370,8 +412,8 @@ function showGraph(item) {
span { span {
flex: 1; flex: 1;
font-size: 12rem; font-size: 14rem;
color: #777777; color: #7e849f;
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
} }
} }
@ -395,60 +437,75 @@ function showGraph(item) {
padding: 0.31rem 0rem; padding: 0.31rem 0rem;
.product_modules { .product_modules {
padding: 0 16rem 16rem;
.base_module { .base_module {
background: #fef8ed; background: #ffffff;
background-image: url('../../assets/images/product/base.png');
background-size: 65rem; background-size: 65rem;
background-repeat: no-repeat; position: relative;
background-position: top right; padding: 16rem 8rem;
padding: 16rem;
border-radius: 0.3rem;
margin-bottom: 11rem; margin-bottom: 11rem;
letter-spacing: 0; letter-spacing: 0;
border-radius: 12rem;
.tag {
position: absolute;
top: 0rem;
right: 0;
background: url('../../assets/images/chat/base-tag.svg');
height: 24rem;
width: 65rem;
content: '';
}
} }
.more_module { .more_module {
border-radius: 0.3rem;
.top_right_bg { .top_right_bg {
background-image: url('../../assets/images/product/more.png'); padding: 16rem 8rem;
background-size: 65rem; background: #fff;
background-repeat: no-repeat;
background-position: top right;
padding: 16rem;
border-radius: 12rem; border-radius: 12rem;
position: relative;
letter-spacing: 0; letter-spacing: 0;
.tag {
position: absolute;
font-size: 12rem;
border-radius: 0rem 12rem 0rem 12rem;
background: rgba(2, 92, 234, 0.1);
width: 64rem;
height: 25rem;
top: 0rem;
line-height: 26rem;
right: 0;
font-weight: 500;
text-align: center;
content: '';
color: #025cea;
}
} }
background: #edf4ff;
background-image: url('../../assets/images/product/productBg.png');
background-size: 470rem;
background-repeat: no-repeat;
background-position: top right;
.tip { .tip {
color: #aaa; color: #b5bace;
text-align: right; font-size: 14rem;
font-size: 12rem; font-weight: normal;
font-family: PingFang SC;
} }
} }
.list { .list {
color: #5b5b5b; color: #17204d;
display: flex; display: flex;
line-height: 18rem; line-height: 18rem;
.list_label { .list_label {
width: 80rem; width: 96rem;
font-weight: 700; font-family: PingFang SC;
font-size: 14rem; font-weight: 600;
color: #000; font-size: 16rem;
color: #17204d;
} }
.list_content { .list_content {
flex: 1; flex: 1;
font-weight: 400; font-weight: 400;
font-size: 14rem; font-size: 16rem;
display: flex; display: flex;
align-items: center; align-items: center;
word-break: normal; word-break: normal;
@ -482,7 +539,7 @@ function showGraph(item) {
} }
.more_button::after { .more_button::after {
content: ""; content: '';
width: 0.35rem; width: 0.35rem;
height: 0.35rem; height: 0.35rem;
background-image: url('../../assets/images/product/arrow.png'); background-image: url('../../assets/images/product/arrow.png');
@ -511,7 +568,7 @@ function showGraph(item) {
} }
.list:nth-child(n):not(:last-child) { .list:nth-child(n):not(:last-child) {
margin-bottom: 15rem; margin-bottom: 8rem;
} }
.top_right_bg > .list:nth-child(n):not(:last-child) { .top_right_bg > .list:nth-child(n):not(:last-child) {
@ -530,10 +587,12 @@ function showGraph(item) {
width: unset; width: unset;
line-height: 18rem; line-height: 18rem;
margin-bottom: 7rem; margin-bottom: 7rem;
white-space: nowrap;
.list_label_span { .list_label_span {
font-weight: 700; font-weight: 400;
border-bottom: 1rem solid #000; font-size: 16rem;
font-family: PingFang SC;
} }
} }
} }
@ -610,7 +669,7 @@ function showGraph(item) {
position: relative; position: relative;
&::after { &::after {
content: " "; content: ' ';
position: absolute; position: absolute;
bottom: -6rem; bottom: -6rem;
left: 0; left: 0;

Write Preview
Loading…
Cancel
Save