Sfoglia il codice sorgente

商店页重新排版

dev
congzc 1 anno fa
parent
commit
59c1d6779c
3 ha cambiato i file con 95 aggiunte e 42 eliminazioni
  1. +1
    -0
      src/styles/my.scss
  2. +10
    -1
      src/views/createVideo/index.vue
  3. +84
    -41
      src/views/myStore/index.vue

+ 1
- 0
src/styles/my.scss Vedi File

@@ -1,5 +1,6 @@
body { body {
font-family: Arial, Microsoft YaHei, 黑体, 宋体, sans-serif; font-family: Arial, Microsoft YaHei, 黑体, 宋体, sans-serif;
// font-size: 14px;
} }


.inmiddle { .inmiddle {


+ 10
- 1
src/views/createVideo/index.vue Vedi File

@@ -335,7 +335,16 @@
v-for="item in soundOptions" v-for="item in soundOptions"
:key="item.value" :key="item.value"
:label=" :label="
item.displayName + `  (${item.sex == 1 ? '♂' : '♀'})`
item.displayName +
`  (${
item.sex == 1
? lanChange == 'zh-cn'
? `男 `
: `man`
: lanChange == 'zh-cn'
? `女`
: `woman`
})`
" "
:value="item.id" :value="item.id"
/> />


+ 84
- 41
src/views/myStore/index.vue Vedi File

@@ -11,14 +11,16 @@
<div class="info"> <div class="info">
<!-- 商品信息 --> <!-- 商品信息 -->
<div class="content"> <div class="content">
<div class="title">
{{ lanChange == "zh-cn" ? item.typeDesc : item.englishName }}
</div>
<div class="money">
<span class="price">{{
lanChange == "zh-cn" ? item.rmb + "¥" : item.dollar + "$"
}}</span
>/{{ item.validityDuration }}{{ $t("shop.day") }}
<div class="titleBox">
<div class="title">
{{ lanChange == "zh-cn" ? item.typeDesc : item.englishName }}
</div>
<div class="money">
<span class="price">{{
lanChange == "zh-cn" ? item.rmb + "¥" : item.dollar + "$"
}}</span
>/{{ item.validityDuration }}{{ $t("shop.day") }}
</div>
</div> </div>
<div class="time"> <div class="time">
<span>{{ item.credit }}</span <span>{{ item.credit }}</span
@@ -42,60 +44,71 @@
<!-- 商品权益 --> <!-- 商品权益 -->
<div class="authority"> <div class="authority">
<div class="authority-item"> <div class="authority-item">
{{ $t("shop.InviteGetscore") }}:{{ item.inviteUserCredit
}}{{ $t("shop.score") }}
{{ $t("shop.InviteGetscore") }}:

<span>
<i>{{ item.inviteUserCredit }}</i
>{{ $t("shop.score") }}</span
>
</div> </div>
<div class="authority-item"> <div class="authority-item">
{{ $t("shop.createVideoPrice") }}:{{ item.videoPrice
}}{{ $t("shop.score") }}
{{ $t("shop.createVideoPrice") }}:<span
><i>{{ item.videoPrice }}</i
>{{ $t("shop.score") }}</span
>
</div> </div>
<div class="authority-item"> <div class="authority-item">
{{ $t("shop.AIGeneratesPhotoPrices") }}:{{ item.photoPrice
}}{{ $t("shop.score") }}
{{ $t("shop.AIGeneratesPhotoPrices") }}:<span
><i>{{ item.photoPrice }}</i
>{{ $t("shop.score") }}</span
>
</div> </div>
<div class="authority-item"> <div class="authority-item">
{{ $t("shop.UnitChargeDuration") }}:{{ item.chargeTime
}}{{ $t("shop.second") }}
{{ $t("shop.UnitChargeDuration") }}:<span
><i>{{ item.chargeTime }}</i
>{{ $t("shop.second") }}</span
>
</div> </div>


<div class="authority-item"> <div class="authority-item">
{{ $t("shop.Language") }}:{{
item.userPackageDetails[0].languageDesc
}}
{{ $t("shop.Language") }}:<span
><i>{{ item.userPackageDetails[0].languageDesc }}</i></span
>
</div> </div>
<div class="authority-item"> <div class="authority-item">
{{ $t("shop.sound") }}:{{
item.userPackageDetails[0].soundDesc
}}
{{ $t("shop.sound") }}:<span
><i>{{ item.userPackageDetails[0].soundDesc }}</i></span
>
</div> </div>
<div class="authority-item"> <div class="authority-item">
{{ $t("shop.IndividualVideoDuration") }}:{{
item.userPackageDetails[0].videoTime
}}{{ $t("shop.second") }}
{{ $t("shop.IndividualVideoDuration") }}:<span
><i>{{ item.userPackageDetails[0].videoTime }}</i
>{{ $t("shop.second") }}</span
>
</div> </div>
<div class="authority-item"> <div class="authority-item">
{{ $t("shop.AIGeneratedPortrait") }}:{{
{{ $t("shop.AIGeneratedPortrait") }}:<span>{{
item.userPackageDetails[0].aiPortrait == 0 item.userPackageDetails[0].aiPortrait == 0
? $t("shop.yes") ? $t("shop.yes")
: $t("shop.no") : $t("shop.no")
}}
}}</span>
</div> </div>
<div class="authority-item"> <div class="authority-item">
{{ $t("shop.PhotoSinging") }}:{{
{{ $t("shop.PhotoSinging") }}:<span>{{
item.userPackageDetails[0].photoSing == 0 item.userPackageDetails[0].photoSing == 0
? $t("shop.yes") ? $t("shop.yes")
: $t("shop.no") : $t("shop.no")
}}
}}</span>
</div> </div>
<div class="authority-item"> <div class="authority-item">
{{ $t("shop.AIGeneratedText") }}:{{
item.userPackageDetails[0].aiCreateTime
}}
{{ $t("shop.AIGeneratedText") }}:<span
><i>{{ item.userPackageDetails[0].aiCreateTime }}</i></span
>
</div> </div>
<div class="authority-item"> <div class="authority-item">
{{ $t("shop.VideoResolution") }}:{{
{{ $t("shop.VideoResolution") }}:<span>{{
item.userPackageDetails[0].resolutionRatioDesc item.userPackageDetails[0].resolutionRatioDesc
}}
}}</span>
</div> </div>
<!-- <div class="authority-item"> <!-- <div class="authority-item">
{{ $t("shop.DigitalPersonTemplate") }}:{{ {{ $t("shop.DigitalPersonTemplate") }}:{{
@@ -315,7 +328,7 @@ onMounted(async () => {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
overflow-x: auto; overflow-x: auto;
padding: 20px 20px 20px 150px;
padding: 70px 20px 20px 10px;
max-width: 100%; max-width: 100%;
// height: 75%; // height: 75%;
// overflow: hidden; // overflow: hidden;
@@ -327,9 +340,9 @@ onMounted(async () => {
// } // }
.item { .item {
position: relative; position: relative;
width: 350px;
height: 780px;
margin-right: 150px;
width: 500px;
// height: 680px;
margin-left: 45px;
background-color: #fffefd; background-color: #fffefd;
flex-shrink: 0; /* 防止缩小宽度 */ flex-shrink: 0; /* 防止缩小宽度 */
border: 1px solid #c0bfbd; border: 1px solid #c0bfbd;
@@ -366,14 +379,18 @@ onMounted(async () => {
padding: 20px; padding: 20px;
cursor: pointer; cursor: pointer;
.content { .content {
height: 220px;
// height: 220px;
padding: 20px; padding: 20px;
border-bottom: 1px solid #c0bfbd; border-bottom: 1px solid #c0bfbd;
cursor: pointer; cursor: pointer;
.titleBox {
display: flex;
justify-content: space-between;
}
.title { .title {
font-size: 30px; font-size: 30px;
font-weight: 700; font-weight: 700;
line-height: 25px;
// line-height: 25px;
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
.el-icon { .el-icon {
@@ -400,19 +417,23 @@ onMounted(async () => {
} }
} }
.time { .time {
text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 20px; font-size: 20px;
color: #7c7c7a; color: #7c7c7a;
cursor: pointer; cursor: pointer;
margin-bottom: 20px;
span { span {
font-weight: 700; font-weight: 700;
color: #242625; color: #242625;
cursor: pointer; cursor: pointer;
} }
} }

.button { .button {
width: 100%; width: 100%;
height: 40px; height: 40px;
font-size: 16px;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
@@ -425,15 +446,37 @@ onMounted(async () => {
.authority { .authority {
margin-top: 10px; margin-top: 10px;
&-item { &-item {
display: flex;
justify-content: space-between;
cursor: pointer; cursor: pointer;
font-weight: 700;
font-weight: 400;
font-size: 18px; font-size: 18px;
padding: 5px 10px; padding: 5px 10px;
color: #7c7c7a;

span { span {
cursor: pointer; cursor: pointer;
color: #7c7c7a; color: #7c7c7a;
margin-right: 30px; margin-right: 30px;
} }
i {
font-size: 20px;
font-style: normal;
margin-right: 5px;
background-image: -webkit-linear-gradient(
left,
#4b61dc,
#15d1b8 25%,
#4b61dc 50%,
#15d1b8 75%,
#4b61dc
) !important;
-webkit-text-fill-color: transparent !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-background-size: 200% 100% !important;
background-size: 200% 100% !important;
}
} }
} }
} }


Caricamento…
Annulla
Salva