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

样式优化

Browse Source
master
wujingling0908 5 days ago
parent 0cec477441
commit de0ea807f3
7 changed files with 71 additions and 66 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. 4
      src/assets/style/chat.css
  2. 117
      src/components/hot-question.vue
  3. 4
      src/components/human-appraise-popup.vue
  4. 2
      src/components/insurance-reservation.vue
  5. 4
      src/components/network-address.vue
  6. 2
      src/components/notice-bar.vue
  7. 4
      src/components/product-card-list.vue

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

@ -452,6 +452,7 @@ img.avatarUrl-img[lazy="loading"] {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
background: linear-gradient(90deg, #025cea 0%, #0595f6 100%); background: linear-gradient(90deg, #025cea 0%, #0595f6 100%);
margin: 12rem 0;
/* box-shadow: /* box-shadow:
1rem 2rem 5rem 0 rgba(10, 75, 173, 0.42), 1rem 2rem 5rem 0 rgba(10, 75, 173, 0.42),
inset 0 -4rem 15rem 0 rgba(164, 203, 255, 0.25); */ inset 0 -4rem 15rem 0 rgba(164, 203, 255, 0.25); */
@ -769,7 +770,7 @@ img.avatarUrl-img[lazy="loading"] {
} }
.chat-txt-content { .chat-txt-content {
background: #5a9cff; background: linear-gradient(103deg, #055cea 0%, #137dff 99%);
color: #ffffff; color: #ffffff;
text-align: left; text-align: left;
-webkit-user-select: text; -webkit-user-select: text;
@ -800,6 +801,7 @@ img.avatarUrl-img[lazy="loading"] {
user-select: text; user-select: text;
min-height: 5rem; min-height: 5rem;
text-align: justify; text-align: justify;
margin: 0;
} }
.chat-txt-content p a { .chat-txt-content p a {

117
src/components/hot-question.vue
Unescape View File

@ -327,14 +327,12 @@ function initHotQuestionYTH(callback) {
function initViewState() { function initViewState() {
footerMore.value = false footerMore.value = false
// 当isQA=true时，需要检查第一页是否需要显示展开收起 // 当isQA=true时，需要检查第一页是否需要显示展开收起
if (props.isQA && active.value === 0 && hotList.value.length > 4) { if (props.isQA && active.value === 0) {
footerMore.value = true footerMore.value = hotList.value.length > 4
} }
} }
function activeChange(e) { function activeChange(e) {
console.log(e)
footerMore.value = true
isExchange.value = false isExchange.value = false
footerOpen.value = false footerOpen.value = false
numNone.value = 3 numNone.value = 3
@ -354,16 +352,16 @@ function activeChange(e) {
console.log(`activeChange: active=${active.value}, len=${len}, isQA=${props.isQA}`) console.log(`activeChange: active=${active.value}, len=${len}, isQA=${props.isQA}`)
// 当isQA=true时，第一页也需要显示展开收起功能 // 当isQA=true时，第一页也需要显示展开收起功能
if ((active.value === 0 && !props.isQA) || len <= 4) { if ((active.value === 0 && !props.isQA)) {
footerMore.value = false footerMore.value = len > 4
} }
// 当isQA=true且在第一页时，如果数据超过4条也要显示展开收起 // 当isQA=true且在第一页时，如果数据超过4条也要显示展开收起
if (props.isQA && active.value === 0 && len > 4) { if (props.isQA && active.value === 0) {
footerMore.value = true footerMore.value = len > 4
} }
// 其他页签如果数据超过4条也要显示展开收起 // 其他页签如果数据超过4条也要显示展开收起
if (active.value > 0 && len > 4) { if (active.value > 0) {
footerMore.value = true footerMore.value = len > 4
} }
updateTabHeight() updateTabHeight()
} }
@ -452,14 +450,14 @@ function updateTabHeight() {
hiddenContent.style.visibility = originalVisibility hiddenContent.style.visibility = originalVisibility
} }
// 展开状态且有更多内容时添加25px // 展开状态且有更多内容时添加25rem
const expandedPadding = footerOpen.value && hasMoreContent ? 25 : 0 const expandedPadding = footerOpen.value && hasMoreContent ? 25 : 0
// 折叠状态且有更多内容时添加25px // 折叠状态且有更多内容时添加25rem
const collapsedPadding = hasMoreContent ? 25 : 0 const collapsedPadding = hasMoreContent ? 25 : 0
const baseHeight = Math.max(totalHeight, 160) // visible content 最小高度 const baseHeight = Math.max(totalHeight, 160) // visible content 最小高度
tabHeights[tabIndex] = `${baseHeight + hiddenHeight + expandedPadding}px` tabHeights[tabIndex] = `${baseHeight + hiddenHeight + expandedPadding}rem`
collapsedHeights[tabIndex] = `${baseHeight + collapsedPadding}px` collapsedHeights[tabIndex] = `${baseHeight + collapsedPadding}rem`
}) })
console.log( console.log(
@ -603,7 +601,7 @@ onMounted(() => {
padding: 0 !important; padding: 0 !important;
&::before { &::before {
right: -5px !important; right: -5rem !important;
} }
} }
@ -615,9 +613,9 @@ onMounted(() => {
} }
.van-tabs__wrap { .van-tabs__wrap {
padding: 0px 6px; padding: 0rem 6rem;
position: relative; position: relative;
height: 39px !important; height: 39rem !important;
&::before { &::before {
content: ''; content: '';
@ -625,9 +623,9 @@ onMounted(() => {
z-index: 3; z-index: 3;
right: 0; right: 0;
top: 0; top: 0;
width: 1px; width: 1rem;
height: 40px; height: 40rem;
box-shadow: -8px 0px 10px 10px #fff; box-shadow: -8rem 0rem 10rem 10rem #fff;
} }
&::after { &::after {
@ -645,13 +643,15 @@ onMounted(() => {
.van-tabs__nav { .van-tabs__nav {
.van-tab { .van-tab {
padding: 0px 10px; padding: 0rem 10rem;
color: #7e849f; color: #7e849f;
font-size: 13px; font-size: 13rem;
} }
} }
.van-cell__value { .van-cell__value {
text-align: left;
color: #025cea;
span { span {
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
@ -659,18 +659,18 @@ onMounted(() => {
} }
.van-tab--active { .van-tab--active {
margin: 0px -2px; margin: 0rem -2rem;
span { span {
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14rem;
color: #025cea; color: #025cea;
} }
} }
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
.hot-question { .hot-question {
padding-top: 10px; padding-top: 0;
} }
.hot-question-main { .hot-question-main {
@ -679,18 +679,18 @@ onMounted(() => {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
background: #fff; background: #fff;
border-radius: 8px; border-radius: 8rem;
overflow: hidden; overflow: hidden;
.content_body { .content_body {
width: 100%; width: 100%;
min-height: 180px; min-height: 180rem;
.van-tabs__nav1 { .van-tabs__nav1 {
font-weight: bold; font-weight: bold;
& :deep(.van-tabs__line) { & :deep(.van-tabs__line) {
width: 24px !important; width: 24rem !important;
background: #025cea; background: #025cea;
} }
@ -703,7 +703,7 @@ onMounted(() => {
.van_cell { .van_cell {
position: relative; position: relative;
width: 100%; width: 100%;
padding: 4px 16px 4px 35px; padding: 4rem 16rem 4rem 35rem;
.van-icon { .van-icon {
color: #7e849f; color: #7e849f;
@ -711,36 +711,39 @@ onMounted(() => {
.van_cell span { .van_cell span {
color: #17204d; color: #17204d;
font-size: 13px; font-size: 13rem;
font-weight: 400; font-weight: 400;
} }
&:nth-child(odd)::before { &:nth-child(odd)::before {
position: absolute; position: absolute;
left: 15px; left: 15rem;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
content: ''; content: '';
width: 11px; width: 11rem;
height: 9px; height: 9rem;
background: url('@/assets/images/qustion_icon.png'); background: url('@/assets/images/qustion_icon.png');
background-size: cover; background-size: cover;
} }
&:nth-child(even)::before { &:nth-child(even)::before {
position: absolute; position: absolute;
left: 15px; left: 15rem;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
content: ''; content: '';
width: 11px; width: 11rem;
height: 9px; height: 9rem;
background: url('@/assets/images/qustion_icon2.png'); background: url('@/assets/images/qustion_icon2.png');
background-size: cover; background-size: cover;
} }
& :deep(.van-cell__right-icon) { & :deep(.van-cell__right-icon) {
font-size: 13px; line-height: 28rem;
height: 28rem;
font-size: 12rem;
color: #025cea;
} }
} }
@ -750,7 +753,7 @@ onMounted(() => {
} }
.change_body { .change_body {
padding: 0px 16px; padding: 0rem 16rem;
.border_div { .border_div {
display: flex; display: flex;
@ -762,26 +765,26 @@ onMounted(() => {
content: ''; content: '';
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 0.5px; height: 0.5rem;
background: #e4eaf2; background: #e4eaf2;
left: 0; left: 0;
top: 0; top: 0;
} }
.refresh-btn-img { .refresh-btn-img {
line-height: 17px; line-height: 17rem;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px 0px; padding: 10rem 0rem;
img { img {
width: 13px; width: 13rem;
height: 13px; height: 13rem;
margin-right: 4px; margin-right: 4rem;
} }
span { span {
font-size: 14px; font-size: 14rem;
color: #17204d; color: #17204d;
font-weight: 700; font-weight: 700;
} }
@ -800,15 +803,15 @@ onMounted(() => {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 30px; height: 30rem;
color: #025cea; color: #025cea;
line-height: 30px; line-height: 30rem;
background: linear-gradient(rgba(255, 255, 255, 0), #fff 70%); background: linear-gradient(rgba(255, 255, 255, 0), #fff 70%);
border-radius: 8px; border-radius: 8rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 14px; font-size: 14rem;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
@ -819,7 +822,7 @@ onMounted(() => {
&.expanded, &.expanded,
.footerOpen & { .footerOpen & {
padding-top: 5px; padding-top: 5rem;
background: #fff; background: #fff;
} }
@ -830,10 +833,10 @@ onMounted(() => {
} }
span { span {
font-size: 15px; font-size: 15rem;
font-weight: 700; font-weight: 700;
margin-right: 4px; margin-right: 4rem;
line-height: 15px; line-height: 15rem;
} }
.van-icon { .van-icon {
@ -870,8 +873,8 @@ onMounted(() => {
.van_cell { .van_cell {
position: relative; position: relative;
width: 100%; width: 100%;
padding: 4px 16px 4px 35px; padding: 4rem 16rem 4rem 35rem;
min-height: 35px; min-height: 35rem;
box-sizing: border-box; box-sizing: border-box;
.van-cell__value { .van-cell__value {
@ -884,7 +887,7 @@ onMounted(() => {
/* 所有页签（不只第一个）给最小高度兜底：tab-inner 是绝对定位， /* 所有页签（不只第一个）给最小高度兜底：tab-inner 是绝对定位，
惰性渲染 + 高度未测量时 tab-content 高度为 0，内容会被 overflow:hidden 藏住 */ 惰性渲染 + 高度未测量时 tab-content 高度为 0，内容会被 overflow:hidden 藏住 */
.van-tabs__content .tab-content { .van-tabs__content .tab-content {
min-height: 140px !important; min-height: 140rem !important;
} }
/* 确保热点页cell内容完全显示 */ /* 确保热点页cell内容完全显示 */
@ -895,7 +898,7 @@ onMounted(() => {
/* 确保"换一换"按钮触发后内容更新正常显示 */ /* 确保"换一换"按钮触发后内容更新正常显示 */
.van-tabs__content > :first-child .visible-content { .van-tabs__content > :first-child .visible-content {
min-height: 140px; min-height: 140rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

4
src/components/human-appraise-popup.vue
Unescape View File

@ -253,7 +253,7 @@ function submitAppraise() {
} }
.sub-title { .sub-title {
font-size: 14px; font-size: 14rem;
font-weight: normal; font-weight: normal;
color: #7e849f; color: #7e849f;
text-align: center; text-align: center;
@ -371,7 +371,7 @@ function submitAppraise() {
border-radius: 8px; border-radius: 8px;
border: none; border: none;
padding: 12px; padding: 12px;
font-size: 14px; font-size: 14rem;
color: #333; color: #333;
box-sizing: border-box; box-sizing: border-box;
resize: none; resize: none;

2
src/components/insurance-reservation.vue
Unescape View File

@ -391,7 +391,7 @@ function validatorPhone(val) {
} }
.insResbox-title { .insResbox-title {
font-size: 14px; font-size: 14rem;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
margin-bottom: 10px; margin-bottom: 10px;

4
src/components/network-address.vue
Unescape View File

@ -84,7 +84,7 @@
</div> </div>
</template> </template>
<template v-else-if="networkInfo == 'noOne'"> <template v-else-if="networkInfo == 'noOne'">
<div style="text-align: left; font-size: 14px; color: #666"> <div style="text-align: left; font-size: 14rem; color: #666">
您好，您所选的区域未设立我司网点，请您选择其他区域 您好，您所选的区域未设立我司网点，请您选择其他区域
</div> </div>
</template> </template>
@ -296,7 +296,7 @@ function RequestInfo(info) {
.edit-address-title-hd { .edit-address-title-hd {
font-family: NotoSansHans-Regular; font-family: NotoSansHans-Regular;
font-size: 14px; font-size: 14rem;
line-height: 21px; line-height: 21px;
font-weight: 700; font-weight: 700;
color: #333333; color: #333333;

2
src/components/notice-bar.vue
Unescape View File

@ -303,7 +303,7 @@ onMounted(() => {
.notice-content { .notice-content {
padding: 15px 15px 30px 15px; padding: 15px 15px 30px 15px;
font-size: 14px; font-size: 14rem;
flex: 1 1 auto; flex: 1 1 auto;
overflow-y: scroll; overflow-y: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

4
src/components/product-card-list.vue
Unescape View File

@ -103,7 +103,7 @@ function sendQuestion(text) {
padding: 24px 16px; padding: 24px 16px;
text-align: center; text-align: center;
color: #999; color: #999;
font-size: 14px; font-size: 14rem;
background: #f9f9f9; background: #f9f9f9;
border-radius: 8px; border-radius: 8px;
} }
@ -193,7 +193,7 @@ function sendQuestion(text) {
text-align: center; text-align: center;
padding: 12px; padding: 12px;
color: #4f95fd; color: #4f95fd;
font-size: 14px; font-size: 14rem;
background: #f0f7ff; background: #f0f7ff;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;

Write Preview
Loading…
Cancel
Save