wujingling0908 4 days ago
commit 2d5990e577
  1. 31
      src/components/abstract.vue

@ -162,11 +162,8 @@ onActivated(async () => {
<span>今日皮卡丘摘要</span><img src="@/assets/images/chat/star.webp" alt="" srcset="" /> <span>今日皮卡丘摘要</span><img src="@/assets/images/chat/star.webp" alt="" srcset="" />
</div> </div>
<div class="list"> <div class="list">
<div <div :class="`item ${(abstractList || []).length === 1 ? 'singleItem' : ''}`"
:class="`item ${(abstractList || []).length === 1 ? 'singleItem' : ''}`" v-for="(item, index) in abstractList || []" :key="index">
v-for="(item, index) in abstractList || []"
:key="index"
>
<div> <div>
<img :src="item.icon" alt="" srcset="" v-if="(abstractList || []).length === 1" /> <img :src="item.icon" alt="" srcset="" v-if="(abstractList || []).length === 1" />
<div> <div>
@ -174,19 +171,13 @@ onActivated(async () => {
<img :src="item.icon" alt="" srcset="" v-if="(abstractList || []).length > 1" /> <img :src="item.icon" alt="" srcset="" v-if="(abstractList || []).length > 1" />
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
</div> </div>
<div <div class="content" :style="{ display: (abstractList || []).length > 2 ? 'block' : 'flex' }">
class="content" <div class="nums" :style="{ paddingTop: (abstractList || []).length > 1 ? '8rem' : '0rem' }">
:style="{ display: (abstractList || []).length > 2 ? 'block' : 'flex' }"
>
<div class="nums">
<div class="num"> <div class="num">
{{ item.num }}<span>{{ item.unit }}</span> {{ item.num }}<span>{{ item.unit }}</span>
</div> </div>
</div> </div>
<div <div class="text" :style="{ marginTop: (abstractList || []).length > 2 ? '8rem' : '0' }">
class="text"
:style="{ marginTop: (abstractList || []).length > 2 ? '8rem' : '0' }"
>
{{ item.text }} {{ item.text }}
</div> </div>
</div> </div>
@ -216,7 +207,7 @@ onActivated(async () => {
backdrop-filter: blur(10rem); backdrop-filter: blur(10rem);
border-radius: 12rem; border-radius: 12rem;
> .title { >.title {
font-family: PingFang SC; font-family: PingFang SC;
font-size: 16rem; font-size: 16rem;
font-weight: 500; font-weight: 500;
@ -228,6 +219,7 @@ onActivated(async () => {
/* 样式描述:用于正文标题 */ /* 样式描述:用于正文标题 */
color: #17204d; color: #17204d;
margin-bottom: 4rem; margin-bottom: 4rem;
img { img {
margin-left: 4rem; margin-left: 4rem;
width: 19.94px; width: 19.94px;
@ -254,11 +246,13 @@ onActivated(async () => {
background: #fcfdfd; background: #fcfdfd;
box-shadow: 0rem 4rem 10rem 0rem #e7effd; box-shadow: 0rem 4rem 10rem 0rem #e7effd;
img { img {
width: 18rem; width: 18rem;
margin-right: 2rem; margin-right: 2rem;
vertical-align: bottom; vertical-align: bottom;
} }
.title { .title {
font-family: PingFang SC; font-family: PingFang SC;
font-size: 12rem; font-size: 12rem;
@ -325,9 +319,10 @@ onActivated(async () => {
display: flex; display: flex;
align-items: center; align-items: center;
color: #ffffff; color: #ffffff;
padding: 4rem 12rem; // padding: 4rem 12rem;
height: 28rem; height: 28rem;
cursor: pointer; cursor: pointer;
justify-content: center;
} }
} }
@ -337,8 +332,9 @@ onActivated(async () => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
> div { >div {
display: flex; display: flex;
img { img {
width: 28rem; width: 28rem;
height: 28rem; height: 28rem;
@ -346,6 +342,7 @@ onActivated(async () => {
margin-right: 8rem; margin-right: 8rem;
align-self: center; align-self: center;
} }
.title { .title {
font-family: PingFang SC; font-family: PingFang SC;
font-size: 14rem; font-size: 14rem;

Loading…
Cancel
Save