Kaynağa Gözat

商店页重新排版

dev
congzc 1 yıl önce
ebeveyn
işleme
59c1d6779c
3 değiştirilmiş dosya ile 95 ekleme ve 42 silme
  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 Dosyayı Görüntüle

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

.inmiddle {


+ 10
- 1
src/views/createVideo/index.vue Dosyayı Görüntüle

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


+ 84
- 41
src/views/myStore/index.vue Dosyayı Görüntüle

@@ -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;
}
}
}
}


Yükleniyor…
İptal
Kaydet