| @@ -58,7 +58,7 @@ export default { | |||
| reselect: "reselect", | |||
| sureUpload: "Confirm upload", | |||
| generateVideo: "Generate Video", | |||
| saveVideo:'save video', | |||
| saveVideo:'save manuscript', | |||
| select:'Please select', | |||
| }, | |||
| @@ -75,11 +75,11 @@ export default { | |||
| loading: "Loading , just a moment", | |||
| noList: "Nothing here. How about making one ?", | |||
| goCreate: "Go Create !", | |||
| draft: "Draft", | |||
| manuscript: "manuscript", | |||
| generating: "Generating", | |||
| generationFailed: "Failed", | |||
| generationSucceed: "Succeed", | |||
| draftText: "Draft", | |||
| manuscriptText: "manuscript", | |||
| generatingText: "The video is generating, please wait a moment", | |||
| generationFailedText: "The video generate is failed, Reason:", | |||
| edit:'edit' | |||
| @@ -101,7 +101,8 @@ export default { | |||
| successed: "Successed", | |||
| failed: "Failed", | |||
| msg1: "Obtain one video production time", | |||
| inputCode:'Please enter the invitation code', | |||
| submit:'submit' | |||
| }, | |||
| // 商店 | |||
| @@ -58,7 +58,7 @@ export default { | |||
| reselect: "重新选择", | |||
| sureUpload: "确认上传", | |||
| generateVideo: "生成视频", | |||
| saveVideo:'保存视频', | |||
| saveVideo:'保存草稿', | |||
| select:'请选择', | |||
| }, | |||
| @@ -75,11 +75,11 @@ export default { | |||
| loading: "加载中,请稍等哦", | |||
| noList: "暂无没有作品哦,快去尝试制作你的第一个视频吧!", | |||
| goCreate: "去创作", | |||
| draft: "草稿", | |||
| manuscript: "草稿", | |||
| generating: "生成中", | |||
| generationFailed: "生成失败", | |||
| generationSucceed: "生成成功", | |||
| draftText: "草稿", | |||
| manuscriptText: "草稿", | |||
| generatingText: "视频正在生成中,请稍等哦", | |||
| generationFailedText: "视频生成失败。原因:", | |||
| edit:'编辑' | |||
| @@ -101,7 +101,8 @@ export default { | |||
| successed: "支付成功", | |||
| failed: "支付失败", | |||
| msg1: "获得视频制作次数一次", | |||
| inputCode:'请输入邀请码', | |||
| submit:'提交' | |||
| }, | |||
| // 商店 | |||
| @@ -5,7 +5,7 @@ ElMessage | |||
| // 开发环境需以 "/api" 拼接,其他环境需以 "/C" 拼接 | |||
| const env = process.env.NODE_ENV == 'development' ? "/api" : "/C" | |||
| console.log(process.env.NODE_ENV, 'env') | |||
| // console.log(process.env.NODE_ENV, 'env') | |||
| /** | |||
| * @description:发送Axios请求 | |||
| @@ -690,7 +690,7 @@ async function uploadProgress(videoId, isSaveVideo) { | |||
| const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | |||
| if (isSaveVideo == "saveVideo") { | |||
| ElMessage.success( | |||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` | |||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` | |||
| ); | |||
| createLoading.value = false; | |||
| return; | |||
| @@ -737,7 +737,7 @@ async function saveOrUpdate(index, isSaveVideo) { | |||
| const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | |||
| if (isSaveVideo == "saveVideo") { | |||
| ElMessage.success( | |||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` | |||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` | |||
| ); | |||
| createLoading.value = false; | |||
| return; | |||
| @@ -213,6 +213,7 @@ | |||
| <div class="text"> | |||
| <!-- 文本域 --> | |||
| <el-input | |||
| maxlength="300" | |||
| id="textInputId" | |||
| v-model="textareaContent" | |||
| :rows="15" | |||
| @@ -284,23 +285,27 @@ | |||
| :value="item" | |||
| /> | |||
| </el-select> | |||
| <!-- 生成视频 --> | |||
| <el-button @click="saveOrUpdate(1)" color="#000" type="primary"> | |||
| <!-- 保存视频 --> | |||
| <el-button | |||
| @click="saveOrUpdate(1, 'saveVideo')" | |||
| color="#000" | |||
| type="primary" | |||
| > | |||
| <my-loading :isLoading="createLoading"></my-loading> | |||
| <span v-if="!createLoading">{{ | |||
| $t("createVideo.generateVideo") | |||
| $t("createVideo.saveVideo") | |||
| }}</span></el-button | |||
| > | |||
| <!-- 保存视频 --> | |||
| <!-- 生成视频 --> | |||
| <el-button | |||
| @click="saveOrUpdate(1, 'saveVideo')" | |||
| style="margin-left: 0" | |||
| @click="saveOrUpdate(1)" | |||
| color="#000" | |||
| type="primary" | |||
| style="margin-left: 0" | |||
| > | |||
| <my-loading :isLoading="createLoading"></my-loading> | |||
| <span v-if="!createLoading">{{ | |||
| $t("createVideo.saveVideo") | |||
| $t("createVideo.generateVideo") | |||
| }}</span></el-button | |||
| > | |||
| </div> | |||
| @@ -322,23 +327,13 @@ | |||
| @click="e.target.value = null" | |||
| @change="handleFileChange" | |||
| /> | |||
| <!-- <video | |||
| style="position: absolute; top: 0" | |||
| v-if="videoSrc" | |||
| :src="videoSrc" | |||
| ref="videoPlayer" | |||
| controls | |||
| ></video> --> | |||
| </div> | |||
| <!-- 录制MP3上传语音 --> | |||
| <p> | |||
| <el-icon class="icon-Mic"><i-ep-Mic /></el-icon> | |||
| {{ $t("createVideo.recordedAudio") }} | |||
| </p> | |||
| <div | |||
| class="uploadAudio" | |||
| :class="audioUrl ? 'uploadAudioAvtion' : ''" | |||
| > | |||
| <div class="uploadAudio"> | |||
| <div class="btnBox"> | |||
| <button | |||
| class="pointer" | |||
| @@ -355,31 +350,33 @@ | |||
| {{ $t("createVideo.stopRecorded") }} | |||
| </button> | |||
| </div> | |||
| <!-- <button @click="playRecording">播放录音</button> --> | |||
| <audio v-if="audioUrl" controls :src="audioUrl"></audio> | |||
| <!-- <button v-if="audioUrl" @click="uploadAudio" class="pointer"> | |||
| 上传音频 | |||
| </button> --> | |||
| </div> | |||
| <!-- 生成视频 --> | |||
| <el-button @click="saveOrUpdate(2)" color="#000" type="primary"> | |||
| <my-loading :isLoading="createLoading"></my-loading> | |||
| <span v-if="!createLoading">{{ | |||
| $t("createVideo.generateVideo") | |||
| }}</span> | |||
| </el-button> | |||
| <div class="AudioBox" v-if="audioUrl"> | |||
| <audio controls :src="audioUrl"></audio> | |||
| </div> | |||
| <!-- 保存视频 --> | |||
| <el-button | |||
| @click="saveOrUpdate(2, 'saveVideo')" | |||
| color="#000" | |||
| type="primary" | |||
| style="margin-left: 0" | |||
| > | |||
| <my-loading :isLoading="createLoading"></my-loading> | |||
| <span v-if="!createLoading">{{ | |||
| $t("createVideo.saveVideo") | |||
| }}</span></el-button | |||
| > | |||
| <!-- 生成视频 --> | |||
| <el-button | |||
| style="margin-left: 0" | |||
| @click="saveOrUpdate(2)" | |||
| color="#000" | |||
| type="primary" | |||
| > | |||
| <my-loading :isLoading="createLoading"></my-loading> | |||
| <span v-if="!createLoading">{{ | |||
| $t("createVideo.generateVideo") | |||
| }}</span> | |||
| </el-button> | |||
| </div> | |||
| </el-tab-pane> | |||
| <!-- ----------------------- 3 --> | |||
| @@ -870,7 +867,7 @@ async function uploadProgress(videoId, isSaveVideo) { | |||
| // 这个if判断是不是仅仅保存视频 | |||
| if (isSaveVideo == "saveVideo") { | |||
| ElMessage.success( | |||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` | |||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` | |||
| ); | |||
| createLoading.value = false; | |||
| router.push("/myCreating"); | |||
| @@ -922,7 +919,7 @@ async function saveOrUpdate(index, isSaveVideo) { | |||
| // 这个if判断是不是仅仅保存视频 | |||
| if (isSaveVideo == "saveVideo") { | |||
| ElMessage.success( | |||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` | |||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` | |||
| ); | |||
| createLoading.value = false; | |||
| router.push("/myCreating"); | |||
| @@ -1004,7 +1001,7 @@ onMounted(async () => { | |||
| .page { | |||
| // height: 1200px; | |||
| height: calc(100vh - 80px); | |||
| padding: 20px 0 0 40px; | |||
| // padding: 20px 0 0 40px; | |||
| background-color: #fff; | |||
| border-radius: 25px 0 0; | |||
| } | |||
| @@ -1012,7 +1009,7 @@ onMounted(async () => { | |||
| .left { | |||
| width: 70%; | |||
| height: 80%; | |||
| padding: 20px; | |||
| :deep(.el-input__wrapper) { | |||
| border: none; | |||
| border-bottom: 2px solid #000; | |||
| @@ -1057,6 +1054,7 @@ onMounted(async () => { | |||
| img { | |||
| max-width: 100%; | |||
| max-height: 100%; | |||
| border-radius: 15px; | |||
| } | |||
| } | |||
| @@ -1064,7 +1062,8 @@ onMounted(async () => { | |||
| position: relative; | |||
| width: 100%; | |||
| height: 100%; | |||
| border: 1px solid #000; | |||
| border: 1px solid #ccc; | |||
| border-radius: 30px; | |||
| .imgBox { | |||
| position: relative; | |||
| width: 100%; | |||
| @@ -1281,10 +1280,11 @@ onMounted(async () => { | |||
| } | |||
| .right { | |||
| width: 25%; | |||
| width: 30%; | |||
| height: 100%; | |||
| background-color: green; | |||
| padding: 30px 30px 20px 30px; | |||
| background-color: #f1f2f6; | |||
| border-radius: 30px 0 0 0; | |||
| :deep(.el-tabs--border-card) { | |||
| font-size: 20px; | |||
| border: none; | |||
| @@ -1292,6 +1292,8 @@ onMounted(async () => { | |||
| .tabs { | |||
| height: 100%; | |||
| padding: 20px 20px 0px 20px; | |||
| border-radius: 20px; | |||
| .card1 { | |||
| .text { | |||
| padding: 10px; | |||
| @@ -1308,7 +1310,7 @@ onMounted(async () => { | |||
| } | |||
| p { | |||
| margin: 10px 0; | |||
| margin: 7px 0; | |||
| } | |||
| > .el-button { | |||
| @@ -1397,6 +1399,12 @@ onMounted(async () => { | |||
| height: 100%; | |||
| } | |||
| } | |||
| .AudioBox { | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 20px; | |||
| transition: all 0.3s; | |||
| } | |||
| > .el-button { | |||
| width: 100%; | |||
| height: 50px; | |||
| @@ -19,10 +19,10 @@ | |||
| </div> | |||
| <!-- 剩余次数 --> | |||
| <div class="left-two border"> | |||
| <div v-if="currentLan == 'en'" class="number"> | |||
| <div v-if="lanChange == 'en'" class="number"> | |||
| 3 Videos Generation Left | |||
| </div> | |||
| <div v-if="currentLan == 'zh-cn'" class="number"> | |||
| <div v-if="lanChange == 'zh-cn'" class="number"> | |||
| 剩余生成视频次数:3条 | |||
| </div> | |||
| <div class="time">{{ $t("account.until") }} 2023/12/31</div> | |||
| @@ -30,7 +30,7 @@ | |||
| {{ $t("account.getMore") }} | |||
| </div> | |||
| </div> | |||
| <!-- 邀请码 --> | |||
| <!-- 我的邀请码 --> | |||
| <div class="left-three border flex justify-between"> | |||
| <div class="codeImg"> | |||
| <img | |||
| @@ -40,18 +40,22 @@ | |||
| /> | |||
| </div> | |||
| <div class="other"> | |||
| <div v-if="currentLan == 'en'"> | |||
| <div v-if="lanChange == 'en'"> | |||
| <span>Invite friends to get</span> | |||
| <span class="bigWord">free</span> | |||
| <span>video</span> | |||
| <span class="bigWord">Generation!</span> | |||
| <p class="myInviteCode"> | |||
| your Invitation code: | |||
| <span id="InviteCodeId">qweiuqkljzxcahdouiahsd</span> | |||
| </p> | |||
| </div> | |||
| <div v-if="currentLan == 'zh-cn'"> | |||
| <div v-if="lanChange == 'zh-cn'"> | |||
| <span>邀请更多好友</span> | |||
| <span class="bigWord">免费</span> | |||
| <span>生成视频!</span> | |||
| <p> | |||
| <p class="myInviteCode"> | |||
| 邀请码: | |||
| <span id="InviteCodeId">qweiuqkljzxcahdouiahsd</span> | |||
| </p> | |||
| @@ -67,6 +71,15 @@ | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 输入邀请码 --> | |||
| <div class="left-four border"> | |||
| <el-input | |||
| class="w-50 m-2" | |||
| v-model="inputCode" | |||
| :placeholder="$t('account.inputCode')" | |||
| /> | |||
| <span class="submitCodeBtn">{{ $t("account.submit") }}</span> | |||
| </div> | |||
| </div> | |||
| <!-- 右侧内容 --> | |||
| <div class="right"> | |||
| @@ -115,9 +128,9 @@ import { useRouter } from "vue-router"; | |||
| import { userInfoPinia } from "@/store/modules/userInfo"; | |||
| const { locale } = useI18n(); | |||
| const currentLan = ref(locale); | |||
| const lanChange = ref(locale); //国际化 | |||
| const userInfo = userInfoPinia(); | |||
| const userInfo = userInfoPinia(); //pinia | |||
| //#region 二维码区域 | |||
| // 点击复制邀请码 | |||
| function copyInviteCode() { | |||
| @@ -140,7 +153,14 @@ function DownloadCodeImg() { | |||
| link.click(); | |||
| } | |||
| //#endregion | |||
| const inputCode = ref(""); | |||
| //#region 输入邀请码区 | |||
| //#endregion --------------------------- | |||
| //#region | |||
| //#endregion --------------------------- | |||
| const router = useRouter(); | |||
| function routerTo(url) { | |||
| router.push(url); | |||
| @@ -149,7 +169,7 @@ function routerTo(url) { | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| height: 1200px; | |||
| height: calc(100vh - 80px); | |||
| padding: 20px 0 0 20px; | |||
| // height: calc(100vh - 84px); | |||
| background-color: #fff; | |||
| @@ -157,7 +177,7 @@ function routerTo(url) { | |||
| } | |||
| .left { | |||
| width: 35%; | |||
| width: 37%; | |||
| height: 100%; | |||
| margin-right: 2%; | |||
| @@ -188,10 +208,16 @@ function routerTo(url) { | |||
| .password { | |||
| display: inline-block; | |||
| // float: right; | |||
| float: right; | |||
| padding: 2px 8px; | |||
| border: 1px solid #000; | |||
| border-radius: 5px; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| &:hover { | |||
| color: #fff; | |||
| background-color: #000; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @@ -223,6 +249,7 @@ function routerTo(url) { | |||
| } | |||
| &-three { | |||
| height: 200px; | |||
| .codeImg { | |||
| position: relative; | |||
| width: 120px; | |||
| @@ -249,17 +276,54 @@ function routerTo(url) { | |||
| display: flex; | |||
| justify-content: space-evenly; | |||
| width: 100%; | |||
| .myBtn { | |||
| margin-right: 10px; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| &:hover { | |||
| color: #fff; | |||
| background-color: #000; | |||
| } | |||
| } | |||
| } | |||
| .myInviteCode { | |||
| margin-top: 20px; | |||
| } | |||
| } | |||
| } | |||
| &-four { | |||
| .el-input { | |||
| width: 80%; | |||
| } | |||
| :deep(.el-input__wrapper.is-focus) { | |||
| box-shadow: 0 0 0 1px #000 !important; | |||
| } | |||
| // padding: 30px 50px !important; | |||
| div { | |||
| margin-top: 5px; | |||
| height: 40px; | |||
| } | |||
| .submitCodeBtn { | |||
| display: inline-block; | |||
| width: 15%; | |||
| padding: 10px 15px; | |||
| color: #000; | |||
| border-radius: 10px; | |||
| text-align: center; | |||
| cursor: pointer; | |||
| transition: all 0.3s; | |||
| &:hover { | |||
| color: #fff; | |||
| background-color: #000; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .right { | |||
| width: 61%; | |||
| width: 58%; | |||
| height: 800px; | |||
| // height: 95%; | |||
| border: 1px solid #000; | |||
| @@ -138,48 +138,48 @@ | |||
| presentItem.videoMsg | |||
| }}</span> | |||
| </div> | |||
| <!-- 有视频路径的页脚 --> | |||
| <div class="footer" v-if="presentItem.videoPlayUrl"> | |||
| <span class="dialog-footer"> | |||
| <!-- dialog下载按钮 --> | |||
| <button | |||
| class="elBtn" | |||
| type="primary" | |||
| @click.stop="handleDownload(presentItem.videoPlayUrl)" | |||
| > | |||
| <el-icon class="icon-delete"><i-ep-download /></el-icon | |||
| >{{ $t("myCreating.download") }} | |||
| </button> | |||
| <!-- dialog删除按钮 --> | |||
| <button | |||
| class="elBtn" | |||
| @click.stop="handelDelete(presentItem.id, presentItem.title)" | |||
| > | |||
| <el-icon class="icon-delete"><i-ep-delete /></el-icon | |||
| >{{ $t("myCreating.delete") }} | |||
| </button> | |||
| </span> | |||
| </div> | |||
| <!-- 无视频路径的页脚 --> | |||
| <div class="footer" v-if="!presentItem.videoPlayUrl"> | |||
| <span class="dialog-footer"> | |||
| <!-- dialog编辑按钮 --> | |||
| <button | |||
| class="elBtn" | |||
| type="primary" | |||
| @click.stop=" | |||
| router.push({ | |||
| path: '/createVideo', | |||
| query: { id: presentItem.id }, | |||
| }) | |||
| " | |||
| v-if="[0, 3].includes(presentItem.videoStatus)" | |||
| > | |||
| {{ $t("myCreating.edit") }} | |||
| </button> | |||
| </span> | |||
| </div> | |||
| </div> | |||
| <!-- 有视频路径的页脚 --> | |||
| <template #footer v-if="presentItem.videoPlayUrl"> | |||
| <span class="dialog-footer"> | |||
| <!-- dialog下载按钮 --> | |||
| <button | |||
| class="elBtn" | |||
| type="primary" | |||
| @click.stop="handleDownload(presentItem.videoPlayUrl)" | |||
| > | |||
| <el-icon class="icon-delete"><i-ep-download /></el-icon | |||
| >{{ $t("myCreating.download") }} | |||
| </button> | |||
| <!-- dialog删除按钮 --> | |||
| <button | |||
| class="elBtn" | |||
| @click.stop="handelDelete(presentItem.id, presentItem.title)" | |||
| > | |||
| <el-icon class="icon-delete"><i-ep-delete /></el-icon | |||
| >{{ $t("myCreating.delete") }} | |||
| </button> | |||
| </span> | |||
| </template> | |||
| <!-- 无视频路径的页脚 --> | |||
| <template #footer v-if="!presentItem.videoPlayUrl"> | |||
| <span class="dialog-footer"> | |||
| <!-- dialog编辑按钮 --> | |||
| <button | |||
| class="elBtn" | |||
| type="primary" | |||
| @click.stop=" | |||
| router.push({ | |||
| path: '/createVideo', | |||
| query: { id: presentItem.id }, | |||
| }) | |||
| " | |||
| v-if="[0, 3].includes(presentItem.videoStatus)" | |||
| > | |||
| {{ $t("myCreating.edit") }} | |||
| </button> | |||
| </span> | |||
| </template> | |||
| </el-dialog> | |||
| <!-- 分页 --> | |||
| <div v-if="!isLoading" class="pagination"> | |||
| @@ -358,7 +358,7 @@ onMounted(() => { | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| min-height: calc(100vh - 80px); | |||
| padding: 20px 130px; | |||
| padding: 15px 130px; | |||
| background-color: #fff; | |||
| border-radius: 25px 0 0; | |||
| .top { | |||
| @@ -380,16 +380,16 @@ onMounted(() => { | |||
| justify-content: flex-start; | |||
| width: 100%; | |||
| // height: 200px; | |||
| margin-top: 20px; | |||
| margin-top: 5px; | |||
| padding-bottom: 50px; | |||
| cursor: pointer; | |||
| .workItem { | |||
| position: relative; | |||
| width: 300px; | |||
| height: 200px; | |||
| margin: 0 20px 30px 0; | |||
| // height: 200px; | |||
| margin: 0 20px 20px 0; | |||
| border: 2px solid #c2c2c2; | |||
| border-radius: 5px; | |||
| border-radius: 15px; | |||
| cursor: pointer; | |||
| overflow: hidden; | |||
| .workImg { | |||
| @@ -507,10 +507,13 @@ onMounted(() => { | |||
| .workInfo { | |||
| justify-content: space-between; | |||
| height: 30px; | |||
| height: 40px; | |||
| padding: 0 10px; | |||
| line-height: 30px; | |||
| line-height: 40px; | |||
| border-top: 1px solid #afafaf; | |||
| white-space: nowrap; | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| } | |||
| .statusName { | |||
| position: absolute; | |||
| @@ -522,7 +525,7 @@ onMounted(() => { | |||
| font-size: 14px; | |||
| transform: rotate(-45deg); | |||
| &.draft { | |||
| &.manuscript { | |||
| /* 草稿 */ | |||
| background: linear-gradient(to right, #d7d2cc 0%, #304352 100%); | |||
| } | |||
| @@ -620,13 +623,12 @@ onMounted(() => { | |||
| .elDialog { | |||
| .videoBox { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| // display: flex; | |||
| // justify-content: space-between; | |||
| width: 100%; | |||
| padding: 10px 40px 30px 40px; | |||
| padding: 20px; | |||
| video { | |||
| max-width: 100%; | |||
| width: 100%; | |||
| max-height: 600px; | |||
| margin: auto; | |||
| } | |||
| @@ -634,6 +636,7 @@ onMounted(() => { | |||
| font-size: 20px; | |||
| font-weight: 600; | |||
| margin: 20px auto; | |||
| text-align: center; | |||
| } | |||
| } | |||
| @@ -5,7 +5,7 @@ | |||
| */ | |||
| export const getStatus = status => { | |||
| if (status == 0) { | |||
| return "draft" | |||
| return "manuscript" | |||
| } else if (status == 1 || status == 2 || status == 4 || status == 6) { | |||
| return "generating" | |||
| } else if (status == 3) { | |||
| @@ -57,13 +57,22 @@ | |||
| </div> | |||
| </div> | |||
| <div class="right"> | |||
| <div style="background-color: #07c160" @click="showOrderCode(1)"> | |||
| <div | |||
| style="background-color: #07c160; cursor: pointer" | |||
| @click="showOrderCode(1)" | |||
| > | |||
| {{ $t("shop.WeChatPay") }} | |||
| </div> | |||
| <div style="background-color: #1378fe" @click="showOrderCode(2)"> | |||
| <div | |||
| style="background-color: #1378fe; cursor: pointer" | |||
| @click="showOrderCode(2)" | |||
| > | |||
| {{ $t("shop.Alipay") }} | |||
| </div> | |||
| <div style="background-color: #0070ba" @click="showOrderCode(3)"> | |||
| <div | |||
| style="background-color: #0070ba; cursor: pointer" | |||
| @click="showOrderCode(3)" | |||
| > | |||
| Paypal | |||
| </div> | |||
| </div> | |||
| @@ -179,8 +188,9 @@ const orderCodeDialogShow = ref(false); | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| min-width: calc(100vw - 210px); | |||
| height: calc(100vh - 80px); | |||
| padding: 20px 0 0 20px; | |||
| padding: 20px 20px 0 20px; | |||
| background-color: #fff; | |||
| border-radius: 25px 0 0; | |||
| padding: 20px; | |||
| @@ -189,15 +199,20 @@ const orderCodeDialogShow = ref(false); | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| // overflow-x: auto; | |||
| padding: 20px 20px 20px 0; | |||
| width: 100%; | |||
| height: 75%; | |||
| padding: 20px 20px 20px 50px; | |||
| // width: 100%; | |||
| // height: 75%; | |||
| overflow: hidden; | |||
| overflow-x: scroll; | |||
| // scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */ | |||
| // -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */ | |||
| // &::-webkit-scrollbar { | |||
| // display: none; /* 隐藏滚动条(Safari、Chrome) */ | |||
| // } | |||
| .item { | |||
| width: 350px; | |||
| height: 800px; | |||
| margin-left: 50px; | |||
| height: 780px; | |||
| margin-right: 50px; | |||
| background-color: #fffefd; | |||
| flex-shrink: 0; /* 防止缩小宽度 */ | |||
| border: 1px solid #c0bfbd; | |||
| @@ -291,13 +306,12 @@ const orderCodeDialogShow = ref(false); | |||
| } | |||
| } | |||
| .commodityList::-webkit-scrollbar { | |||
| display: none; /* 隐藏滚动条(Safari、Chrome) */ | |||
| } | |||
| .payDialog { | |||
| display: flex; | |||
| position: relative; | |||
| min-height: 500px; | |||
| .left { | |||
| width: 350px; | |||
| width: 35%; | |||
| border-right: 1px solid #7c7c7a; | |||
| .title { | |||
| color: #242625; | |||
| @@ -317,8 +331,12 @@ const orderCodeDialogShow = ref(false); | |||
| } | |||
| } | |||
| .right { | |||
| padding: 100px 300px; | |||
| div { | |||
| width: 65%; | |||
| position: absolute; | |||
| top: 20%; | |||
| right: 0%; | |||
| padding-left: 20%; | |||
| > div { | |||
| width: 200px; | |||
| height: 40px; | |||
| // border: 1px solid #242625; | |||