| @@ -0,0 +1,101 @@ | |||
| <template> | |||
| <div> | |||
| <el-dialog | |||
| :close-on-press-escape="false" | |||
| :close-on-click-modal="false" | |||
| top="25vh" | |||
| v-model="props.showTalkUsDialog" | |||
| width="40%" | |||
| center | |||
| :title="$t(`shop.talkUs`)" | |||
| > | |||
| <div class="TalkUsDialog"> | |||
| <div class="TalkUsDialog-content"> | |||
| <!-- 电话 --> | |||
| <div class="phoneBox"> | |||
| <img src="../assets/img/phone.png" alt="" /> | |||
| <div>+86 138 0013 8000</div> | |||
| </div> | |||
| <!-- 二维码 --> | |||
| <div class="codeBox"> | |||
| <img src="../assets/img/code.png" alt="" /> | |||
| <div>{{ lanChange == "zh-cn" ? "微信" : "Wechat " }}</div> | |||
| </div> | |||
| <!-- 邮箱 --> | |||
| <div class="EmailBox"> | |||
| <img src="../assets/img/Email.png" alt="" /> | |||
| <div class="sendEmail"> | |||
| {{ lanChange == "发送邮件" ? "微信" : "Send Email" }} | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="close" @click="close"> | |||
| {{ $t(`public.close`) }} | |||
| </div> | |||
| </div> | |||
| </el-dialog> | |||
| </div> | |||
| </template> | |||
| <script setup> | |||
| import { ElMessage } from "element-plus/es"; | |||
| import { ref, reactive, watch } from "vue"; | |||
| import { awsImgUpload, saveImgApi } from "../apis/createVideo"; | |||
| import { useI18n } from "vue-i18n"; | |||
| const { locale } = useI18n(); | |||
| const lanChange = ref(locale); | |||
| const emit = defineEmits(["updateShowTalkUsDialog"]); | |||
| const props = defineProps({ | |||
| showTalkUsDialog: { | |||
| default: false, | |||
| type: Boolean, | |||
| }, | |||
| }); | |||
| function close() { | |||
| emit("updateShowTalkUsDialog"); | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| :deep(.el-dialog__headerbtn) { | |||
| display: none; | |||
| } | |||
| .TalkUsDialog { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| &-content { | |||
| width: 100%; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| > div { | |||
| width: 30%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| img { | |||
| width: 100px; | |||
| height: 100px; | |||
| margin-bottom: 40px; | |||
| } | |||
| } | |||
| .sendEmail { | |||
| text-decoration: underline; | |||
| cursor: pointer; | |||
| } | |||
| } | |||
| .close { | |||
| margin-top: 50px; | |||
| width: 100px; | |||
| height: 50px; | |||
| font-size: 18px; | |||
| line-height: 50px; | |||
| text-align: center; | |||
| border-radius: 15px; | |||
| border: 2px solid #ccc; | |||
| cursor: pointer; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -10,6 +10,7 @@ export default { | |||
| confirm:'Confirm', | |||
| username:'Username', | |||
| avatar:'Avatar', | |||
| close:"Close", | |||
| }, | |||
| // 登录页面国际化 | |||
| login: { | |||
| @@ -10,6 +10,7 @@ export default { | |||
| confirm:'确定', | |||
| username:'用户名', | |||
| avatar:'头像', | |||
| close:"关闭", | |||
| }, | |||
| // 登录页面国际化 | |||
| login: { | |||
| @@ -34,9 +34,12 @@ declare module '@vue/runtime-core' { | |||
| IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | |||
| IEpCloseBold: typeof import('~icons/ep/close-bold')['default'] | |||
| IEpDelete: typeof import('~icons/ep/delete')['default'] | |||
| IEpDocumentAdd: typeof import('~icons/ep/document-add')['default'] | |||
| IEpDownload: typeof import('~icons/ep/download')['default'] | |||
| IEpEdit: typeof import('~icons/ep/edit')['default'] | |||
| IEpGoods: typeof import('~icons/ep/goods')['default'] | |||
| IEpLoading: typeof import('~icons/ep/loading')['default'] | |||
| IEpLock: typeof import('~icons/ep/lock')['default'] | |||
| IEpMenu: typeof import('~icons/ep/menu')['default'] | |||
| IEpSearch: typeof import('~icons/ep/search')['default'] | |||
| IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] | |||
| @@ -50,6 +53,7 @@ declare module '@vue/runtime-core' { | |||
| SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default'] | |||
| SizeSelect: typeof import('./../components/SizeSelect/index.vue')['default'] | |||
| SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default'] | |||
| TalkUs: typeof import('./../components/talkUs.vue')['default'] | |||
| WangEditor: typeof import('./../components/WangEditor/index.vue')['default'] | |||
| } | |||
| export interface ComponentCustomProperties { | |||
| @@ -17,5 +17,6 @@ | |||
| overflow-y: scroll; | |||
| background-color: #fff; | |||
| min-height: calc(100vh - 80px); | |||
| text-align: center; | |||
| } | |||
| </style> | |||
| @@ -134,7 +134,7 @@ | |||
| </div> | |||
| </div> | |||
| <!-- 企业版 --> | |||
| <div class="item"> | |||
| <div class="item" @click="showTalkUsDialog = true"> | |||
| <!-- 遮罩层 --> | |||
| <div class="mask" v-if="false"> | |||
| <el-icon><i-ep-Lock /></el-icon> | |||
| @@ -237,6 +237,12 @@ | |||
| </div> | |||
| </el-dialog> | |||
| </el-dialog> | |||
| <!-- 联系我们对话框 --> | |||
| <talkUs | |||
| :showTalkUsDialog="showTalkUsDialog" | |||
| @updateShowTalkUsDialog="updateShowTalkUsDialog" | |||
| ></talkUs> | |||
| </div> | |||
| </template> | |||
| @@ -245,7 +251,7 @@ | |||
| import { getCurrentInstance, ref, onMounted } from "vue"; | |||
| // import { packageInfoApi } from "@/apis/myStore"; | |||
| import { useI18n } from "vue-i18n"; | |||
| import talkUs from "@/components/talkUs.vue"; | |||
| import { useRoute, useRouter } from "vue-router"; | |||
| const route = useRoute(); | |||
| const router = useRouter(); | |||
| @@ -490,7 +496,6 @@ const scrollContainerRef = ref(null); | |||
| function handleWheel(event) { | |||
| const scrollContainer = scrollContainerRef.value; // 获取滚动容器的引用 | |||
| const scrollAmount = 150; // 每次滚动的距离 | |||
| // 检查滚动方向 | |||
| if (event.deltaY > 0) { | |||
| // 向右滚动 | |||
| @@ -503,6 +508,13 @@ function handleWheel(event) { | |||
| } | |||
| //#endregion ------------------------------------ | |||
| //#region 联系我们弹窗 | |||
| const showTalkUsDialog = ref(false); | |||
| const updateShowTalkUsDialog = (newValue) => { | |||
| showTalkUsDialog.value = newValue; | |||
| }; | |||
| //#endregion ------------------------------------ | |||
| //#region 页面初始化 | |||
| onMounted(async () => { | |||
| // getPackageList(); | |||
| @@ -529,6 +541,9 @@ onMounted(async () => { | |||
| padding: 20px; | |||
| user-select: none; | |||
| overflow: hidden; | |||
| ::-webkit-scrollbar { | |||
| display: none; | |||
| } | |||
| } | |||
| // 方案列表 | |||
| .commoditylIst { | |||
| @@ -545,6 +560,7 @@ onMounted(async () => { | |||
| // &::-webkit-scrollbar { | |||
| // display: none; /* 隐藏滚动条(Safari、Chrome) */ | |||
| // } | |||
| .item { | |||
| position: relative; | |||
| width: 480px; | |||
| @@ -653,6 +669,7 @@ onMounted(async () => { | |||
| cursor: pointer; | |||
| } | |||
| .description { | |||
| cursor: pointer; | |||
| margin-top: 50px; | |||
| margin-bottom: 30px; | |||
| width: 100%; | |||
| @@ -662,6 +679,7 @@ onMounted(async () => { | |||
| font-size: 18px; | |||
| color: #7c7c7a; | |||
| > div { | |||
| cursor: pointer; | |||
| margin-bottom: 20px; | |||
| } | |||
| } | |||
| @@ -795,4 +813,42 @@ onMounted(async () => { | |||
| } | |||
| } | |||
| } | |||
| // 联系我们弹窗 | |||
| .TalkUsDialog { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| &-content { | |||
| width: 100%; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| > div { | |||
| width: 30%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| img { | |||
| width: 100px; | |||
| height: 100px; | |||
| margin-bottom: 40px; | |||
| } | |||
| } | |||
| .sendEmail { | |||
| text-decoration: underline; | |||
| cursor: pointer; | |||
| } | |||
| } | |||
| .close { | |||
| margin-top: 50px; | |||
| width: 100px; | |||
| height: 50px; | |||
| font-size: 18px; | |||
| line-height: 50px; | |||
| text-align: center; | |||
| border-radius: 15px; | |||
| border: 2px solid #ccc; | |||
| cursor: pointer; | |||
| } | |||
| } | |||
| </style> | |||