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