aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

部分页面样式调整

Browse Source
This commit is contained in:
X1627315083
2025-06-30 10:53:25 +08:00
parent 6fc2a8fc57
commit 3ce63ea3a7
60 changed files with 1326 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/component/HomePage/ColorboardUpload.vue
View File

@@ -915,6 +915,7 @@ export default defineComponent({
position: relative;
padding-right: calc(3rem*1.2);
margin-right: 2.4rem;
width: 24rem;
.upload_centetn{
// overflow-x: hidden;
height: calc(100% - 4.4rem*1.2);

1
src/component/HomePage/Generate.vue
View File

@@ -334,6 +334,7 @@ export default defineComponent({
})
const setSpeed = (item:any)=>{
speed.speedState = false
document.removeEventListener('click',openSpeed)
speed.speedData = item
}
return {

8
src/component/HomePage/PrintboardUpload.vue
View File

@@ -211,6 +211,9 @@ export default defineComponent({
let printCatecoryList:any = computed(()=>{
return store.state.UserHabit.printType
})
let printboardList = computed(()=>{
return store.state.UploadFilesModule.printboard
})
return {
fileList,
printImgList,
@@ -225,6 +228,7 @@ export default defineComponent({
scene,
openMenu,
printCatecoryList,
printboardList,
}
},
computed:{
@@ -253,9 +257,7 @@ export default defineComponent({
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
currentFileNum:0, //当前上传的文件数
isUpload:false,
printboardList:computed(()=>{
return useStore().state.UploadFilesModule.printboard
}),
isTextarea:false,
isInputFocus:false,
}

254
src/component/HomePage/renew.vue
View File

@@ -5,7 +5,7 @@
:get-container="() => $refs.renew"
v-model:visible="renewModel"
:footer="null"
width="130rem"
width="110rem"
height="auto"
:maskClosable="false"
:centered="true"
@@ -49,90 +49,64 @@
</div>
<div class="renewContent">
<div class="left">
<div class="title">Unlock the Pro Advantage</div>
<div class="video">
<video autoplay loop muted playsinline src="@/assets/images/icon/paymentVideo.mp4"></video>
<div class="mask"></div>
</div>
<div class="title">{{ $t("Renew.Strengths") }}</div>
<div class="content">
<div class="benefits">
<div>Benefits</div>
<div class="contrast">
<div>Free</div>
<div>PRO</div>
<div class="benefitsItem">
<div class="describe">
<div class="icon">
<img src="@/assets/images/icon/paymentIntroduce1.png" alt="">
</div>
<div class="text">
<p class="title">{{ $t("Renew.StrengthsTitle1") }}<br>{{ $t("Renew.StrengthsTitle1_1") }}</p>
<p class="info">
{{ $t("Renew.StrengthsInfo1") }}<br>{{ $t("Renew.StrengthsInfo1_1") }}
</p>
</div>
</div>
</div>
<div class="benefitsItem">
<div class="describe">
<div class="icon">
<img
src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
/>
<img src="@/assets/images/icon/paymentIntroduce2.png" alt="">
</div>
<div class="text">
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
<p class="title">{{ $t("Renew.StrengthsTitle2") }}<br>{{ $t("Renew.StrengthsTitle2_1") }}</p>
<p class="info">
More accurate answers with multiple latest AI models
{{ $t("Renew.StrengthsInfo2") }}<br>{{ $t("Renew.StrengthsInfo2_1") }}
</p>
</div>
</div>
<div class="contrast">
<div>√</div>
<div>×</div>
</div>
</div>
<div class="benefitsItem">
<div class="describe">
<div class="icon">
<img
src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
/>
<img src="@/assets/images/icon/paymentIntroduce3.png" alt="">
</div>
<div class="text">
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
<p class="title"></p>
<p class="title">{{ $t("Renew.StrengthsTitle3") }}<br>{{ $t("Renew.StrengthsTitle3_1") }}</p>
<p class="info">
More accurate answers with multiple latest AI models
{{ $t("Renew.StrengthsInfo3") }}<br>{{ $t("Renew.StrengthsInfo3_1") }}<br>{{ $t("Renew.StrengthsInfo3_2") }}
</p>
</div>
</div>
<div class="contrast">
<div>√</div>
<div>×</div>
</div>
</div>
<div class="benefitsItem">
<div class="describe">
<div class="icon">
<img
src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
/>
<img src="@/assets/images/icon/paymentIntroduce4.png" alt="">
</div>
<div class="text">
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
<p class="title">{{ $t("Renew.StrengthsTitle4") }}<br>{{ $t("Renew.StrengthsTitle4_1") }}</p>
<p class="info">
More accurate answers with multiple latest AI models
{{ $t("Renew.StrengthsInfo4") }}<br>{{ $t("Renew.StrengthsInfo4_1") }}
</p>
</div>
</div>
<div class="contrast">
<div>√</div>
<div>×</div>
</div>
</div>
<div class="benefitsItem">
<div class="describe">
<div class="icon">
<img
src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
/>
</div>
<div class="text">
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
<p class="info">
More accurate answers with multiple latest AI models
</p>
</div>
</div>
<div class="contrast">
<div>√</div>
<div>×</div>
</div>
</div>
</div>
</div>
@@ -140,7 +114,7 @@
<div class="title">
{{ $t("Renew.title") }}
</div>
<div class="info">Get started today for unlimited access!</div>
<!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
<div class="content">
<div
class="productItem"
@@ -232,25 +206,34 @@
</div>
</div>
<div class="gallery_btn gallery_btn_radius" @click="payment">
Continue
{{ $t("Renew.Continue") }}
</div>
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
<label>
<input type="checkbox" v-model="clause" />
<!-- <input type="checkbox" v-model="clause" /> -->
<span class="generalModelDescription"
>{{ $t("upgradePlan.policy1")
}}<a
>{{ $t("upgradePlan.policy")}}
<!-- <a
href="https://code-create.com.hk/aida-terms-and-conditions/"
target="_blank"
>{{ $t("upgradePlan.policy2") }}</a
>{{ $t("upgradePlan.policy3")
}}<a
>{{ $t("upgradePlan.policy3")}}
<a
href="https://code-create.com.hk/aida-subscription-agreement/"
target="_blank"
>{{ $t("upgradePlan.policy4") }}</a
>. *</span
> -->
<!-- . * -->
</span
>
</label>
<label class="secure">
<span><i class="fi fi-rr-shield-check"></i>Pay safe & secure</span>
</label>
<label class="payIcon">
<img class="stripe" src="@/assets/images/icon/stripe.svg" alt="">
<img class="alipay" src="@/assets/images/icon/alipay.svg" alt="">
</label>
</div>
<!-- <div class="paySecure">
<svg data-v-4715f595="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17" class="shield-icon"><path fill="#4AA181" stroke="#4AA181" stroke-width=".395" d="M7.44.957 1.914 3.398a1.38 1.38 0 0 0-.822 1.256v3.69c0 1.648.443 3.257 1.218 4.667 1.577 2.154 3.835 3.222 5.986 3.222 2.152 0 4.206-1.069 5.387-3.21a9.7 9.7 0 0 0 1.225-4.679v-3.69a1.38 1.38 0 0 0-.822-1.256L8.56.957zm0 0h.001m-.001 0h.001m0 0c.351-.158.758-.159 1.119 0z"></path><g clip-path="url(#a)"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.184" d="M10.634 6.563 7.016 10.18 5.37 8.536"></path></g><defs><clipPath id="a"><path fill="#fff" d="M4.055 4.586h7.895v7.895H4.055z"></path></clipPath></defs></svg>
@@ -315,7 +298,7 @@ export default defineComponent({
activity: false, //活动打折
type: {
value: "Month",
label: "Month",
label: "Monthly",
},
PaymentType: "",
promotionData: {
@@ -332,7 +315,7 @@ export default defineComponent({
typeValue: "year",
type: {
value: "Year",
label: "Year",
label: "Yearly",
},
PaymentType: "",
promotionData: {
@@ -410,23 +393,18 @@ export default defineComponent({
renewData.current.PaymentType = str;
};
const payment = () => {
if (!payMethodData.clause) {
let labelDisclaimer: any = payMethodData.labelDisclaimer;
if (!labelDisclaimer.classList.contains("animation")) {
labelDisclaimer.classList.add("animation");
setTimeout(() => {
labelDisclaimer.classList.remove("animation");
}, 1000);
}
return;
}
// if (!payMethodData.clause) {
// let labelDisclaimer: any = payMethodData.labelDisclaimer;
// if (!labelDisclaimer.classList.contains("animation")) {
// labelDisclaimer.classList.add("animation");
// setTimeout(() => {
// labelDisclaimer.classList.remove("animation");
// }, 1000);
// }
// return;
// }
if (!renewData.current.PaymentType)
return message.info(t("Renew.PleaseSelectPayment"));
// let data = {
// autoRenewal:renewData.current.PaymentType != 'Alipay',//one_time为不自动续费
// productName:'Subscription',
// subscribeType,//yearly为年费，monthly为月费
// }
let url = window.location.origin + "/paySucceed";
let data = {
autoRenewal: renewData.current.PaymentType != "Alipay", //false为不自动续费
@@ -565,6 +543,7 @@ export default defineComponent({
font-size: 3.2rem;
font-weight: 600;
line-height: 4rem;
position: relative;
}
> .info {
text-align: center;
@@ -572,85 +551,89 @@ export default defineComponent({
font-weight: 400;
margin-top: 0.8rem;
font-size: 1.6rem;
position: relative;
}
> .content {
margin-top: 2rem;
display: flex;
flex-direction: column;
position: relative;
}
}
> .left {
width: 60%;
width: 50%;
background: #0f0f0f;
color: #fff;
padding: 4rem 3.2rem;
position: relative;
> .video{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
> video{
width: 100%;
height: 100%;
object-fit: cover;
}
> .mask{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,.5);
}
}
> .title {
opacity: 0.6;
opacity: 1;
// color: #fff;
}
> .content {
> .benefits,
flex-wrap: wrap;
flex-direction: row;
> .benefitsItem {
display: flex;
> .contrast {
margin-left: auto;
display: flex;
align-items: center;
> div {
width: 8rem;
text-align: center;
}
> div:nth-child(1) {
margin-right: 2.4rem;
opacity: 0.5;
}
> div:nth-child(2) {
opacity: 1;
color: #38c793;
text-shadow: 0 4px 27.1px #38c793b3;
}
}
}
> .benefits {
> div:nth-child(1) {
opacity: 0.5;
}
font-weight: 600;
font-size: 2rem;
margin: 1rem 0;
padding: 0 1.6rem;
width: 50%;
}
> .benefitsItem {
border: 1px solid #27272a;
border-radius: 2.4rem;
margin-bottom: 1.6rem;
padding: 1.6rem;
justify-content: center;
> .describe {
display: flex;
align-items: center;
flex-direction: column;
> .icon {
border: 1px solid #27272a;
background: linear-gradient(#1d1d1d, #000);
border-radius: 1.4rem;
margin-right: 1.6rem;
padding: 1.4rem;
// border: 1px solid #27272a;
// background: linear-gradient(#1d1d1d, #000);
// border-radius: 1.4rem;
// margin-right: 1.6rem;
// padding: 1.4rem;
> img {
width: 3.5rem;
height: 3.5rem;
width: 12rem;
height: 12rem;
}
}
> .text {
text-align: center;
> p {
margin: 0;
}
> .title {
font-size: 1.8rem;
font-size: 2.1rem;
font-weight: 600;
line-height: 1;
}
> .info {
font-weight: 400;
font-weight: 600;
margin-top: 0.4rem;
font-size: 1.6rem;
opacity: 0.5;
font-size: 1.2rem;
// opacity: 0.5;
}
}
}
@@ -658,7 +641,7 @@ export default defineComponent({
}
}
> .right {
width: 40%;
width: 50%;
flex-direction: column;
align-items: center;
padding: 4rem 3.2rem;
@@ -808,9 +791,14 @@ export default defineComponent({
> .gallery_btn {
width: 100%;
margin: 2rem 0;
margin-bottom: .5rem;
margin-top: 1rem;
}
> .payMethod_payAffirm_clause {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
label {
input {
margin-right: 1rem;
@@ -826,6 +814,30 @@ export default defineComponent({
}
}
}
> .secure{
border: 1px solid #ededed;
background: #f1fbf9;
color: #1cb36c;
padding: .4rem .8rem;
border-radius: .5rem;
margin-top: 4rem;
> span{
display: flex;
align-items: center;
}
i{
display: flex;
margin-right: .5rem;
}
}
> .payIcon{
height: 2rem;
margin-top: 1rem;
img{
margin: 0 .3rem;
height: 100%;
}
}
&.animation {
animation: shake 0.3s linear;
@keyframes shake {

1
src/component/HomePage/scaleImage.vue
View File

@@ -257,6 +257,7 @@ export default defineComponent({
const setSpeed = (item:any)=>{
speed.speedData = item
speed.speedState = false
document.removeEventListener('click',openSpeed)
}
let scaleImage: any = ref(false);
let isShowMark = ref(false)