| @@ -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', | confirm:'Confirm', | ||||
| username:'Username', | username:'Username', | ||||
| avatar:'Avatar', | avatar:'Avatar', | ||||
| close:"Close", | |||||
| }, | }, | ||||
| // 登录页面国际化 | // 登录页面国际化 | ||||
| login: { | login: { | ||||
| @@ -10,6 +10,7 @@ export default { | |||||
| confirm:'确定', | confirm:'确定', | ||||
| username:'用户名', | username:'用户名', | ||||
| avatar:'头像', | avatar:'头像', | ||||
| close:"关闭", | |||||
| }, | }, | ||||
| // 登录页面国际化 | // 登录页面国际化 | ||||
| login: { | login: { | ||||
| @@ -34,9 +34,12 @@ declare module '@vue/runtime-core' { | |||||
| IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | ||||
| IEpCloseBold: typeof import('~icons/ep/close-bold')['default'] | IEpCloseBold: typeof import('~icons/ep/close-bold')['default'] | ||||
| IEpDelete: typeof import('~icons/ep/delete')['default'] | IEpDelete: typeof import('~icons/ep/delete')['default'] | ||||
| IEpDocumentAdd: typeof import('~icons/ep/document-add')['default'] | |||||
| IEpDownload: typeof import('~icons/ep/download')['default'] | IEpDownload: typeof import('~icons/ep/download')['default'] | ||||
| IEpEdit: typeof import('~icons/ep/edit')['default'] | IEpEdit: typeof import('~icons/ep/edit')['default'] | ||||
| IEpGoods: typeof import('~icons/ep/goods')['default'] | |||||
| IEpLoading: typeof import('~icons/ep/loading')['default'] | IEpLoading: typeof import('~icons/ep/loading')['default'] | ||||
| IEpLock: typeof import('~icons/ep/lock')['default'] | |||||
| IEpMenu: typeof import('~icons/ep/menu')['default'] | IEpMenu: typeof import('~icons/ep/menu')['default'] | ||||
| IEpSearch: typeof import('~icons/ep/search')['default'] | IEpSearch: typeof import('~icons/ep/search')['default'] | ||||
| IEpVideoPlay: typeof import('~icons/ep/video-play')['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'] | SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default'] | ||||
| SizeSelect: typeof import('./../components/SizeSelect/index.vue')['default'] | SizeSelect: typeof import('./../components/SizeSelect/index.vue')['default'] | ||||
| SvgIcon: typeof import('./../components/SvgIcon/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'] | WangEditor: typeof import('./../components/WangEditor/index.vue')['default'] | ||||
| } | } | ||||
| export interface ComponentCustomProperties { | export interface ComponentCustomProperties { | ||||
| @@ -17,5 +17,6 @@ | |||||
| overflow-y: scroll; | overflow-y: scroll; | ||||
| background-color: #fff; | background-color: #fff; | ||||
| min-height: calc(100vh - 80px); | min-height: calc(100vh - 80px); | ||||
| text-align: center; | |||||
| } | } | ||||
| </style> | </style> | ||||
| @@ -134,7 +134,7 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 企业版 --> | <!-- 企业版 --> | ||||
| <div class="item"> | |||||
| <div class="item" @click="showTalkUsDialog = true"> | |||||
| <!-- 遮罩层 --> | <!-- 遮罩层 --> | ||||
| <div class="mask" v-if="false"> | <div class="mask" v-if="false"> | ||||
| <el-icon><i-ep-Lock /></el-icon> | <el-icon><i-ep-Lock /></el-icon> | ||||
| @@ -237,6 +237,12 @@ | |||||
| </div> | </div> | ||||
| </el-dialog> | </el-dialog> | ||||
| </el-dialog> | </el-dialog> | ||||
| <!-- 联系我们对话框 --> | |||||
| <talkUs | |||||
| :showTalkUsDialog="showTalkUsDialog" | |||||
| @updateShowTalkUsDialog="updateShowTalkUsDialog" | |||||
| ></talkUs> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| @@ -245,7 +251,7 @@ | |||||
| import { getCurrentInstance, ref, onMounted } from "vue"; | import { getCurrentInstance, ref, onMounted } from "vue"; | ||||
| // import { packageInfoApi } from "@/apis/myStore"; | // import { packageInfoApi } from "@/apis/myStore"; | ||||
| import { useI18n } from "vue-i18n"; | import { useI18n } from "vue-i18n"; | ||||
| import talkUs from "@/components/talkUs.vue"; | |||||
| import { useRoute, useRouter } from "vue-router"; | import { useRoute, useRouter } from "vue-router"; | ||||
| const route = useRoute(); | const route = useRoute(); | ||||
| const router = useRouter(); | const router = useRouter(); | ||||
| @@ -490,7 +496,6 @@ const scrollContainerRef = ref(null); | |||||
| function handleWheel(event) { | function handleWheel(event) { | ||||
| const scrollContainer = scrollContainerRef.value; // 获取滚动容器的引用 | const scrollContainer = scrollContainerRef.value; // 获取滚动容器的引用 | ||||
| const scrollAmount = 150; // 每次滚动的距离 | const scrollAmount = 150; // 每次滚动的距离 | ||||
| // 检查滚动方向 | // 检查滚动方向 | ||||
| if (event.deltaY > 0) { | if (event.deltaY > 0) { | ||||
| // 向右滚动 | // 向右滚动 | ||||
| @@ -503,6 +508,13 @@ function handleWheel(event) { | |||||
| } | } | ||||
| //#endregion ------------------------------------ | //#endregion ------------------------------------ | ||||
| //#region 联系我们弹窗 | |||||
| const showTalkUsDialog = ref(false); | |||||
| const updateShowTalkUsDialog = (newValue) => { | |||||
| showTalkUsDialog.value = newValue; | |||||
| }; | |||||
| //#endregion ------------------------------------ | |||||
| //#region 页面初始化 | //#region 页面初始化 | ||||
| onMounted(async () => { | onMounted(async () => { | ||||
| // getPackageList(); | // getPackageList(); | ||||
| @@ -529,6 +541,9 @@ onMounted(async () => { | |||||
| padding: 20px; | padding: 20px; | ||||
| user-select: none; | user-select: none; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| ::-webkit-scrollbar { | |||||
| display: none; | |||||
| } | |||||
| } | } | ||||
| // 方案列表 | // 方案列表 | ||||
| .commoditylIst { | .commoditylIst { | ||||
| @@ -545,6 +560,7 @@ onMounted(async () => { | |||||
| // &::-webkit-scrollbar { | // &::-webkit-scrollbar { | ||||
| // display: none; /* 隐藏滚动条(Safari、Chrome) */ | // display: none; /* 隐藏滚动条(Safari、Chrome) */ | ||||
| // } | // } | ||||
| .item { | .item { | ||||
| position: relative; | position: relative; | ||||
| width: 480px; | width: 480px; | ||||
| @@ -653,6 +669,7 @@ onMounted(async () => { | |||||
| cursor: pointer; | cursor: pointer; | ||||
| } | } | ||||
| .description { | .description { | ||||
| cursor: pointer; | |||||
| margin-top: 50px; | margin-top: 50px; | ||||
| margin-bottom: 30px; | margin-bottom: 30px; | ||||
| width: 100%; | width: 100%; | ||||
| @@ -662,6 +679,7 @@ onMounted(async () => { | |||||
| font-size: 18px; | font-size: 18px; | ||||
| color: #7c7c7a; | color: #7c7c7a; | ||||
| > div { | > div { | ||||
| cursor: pointer; | |||||
| margin-bottom: 20px; | 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> | </style> | ||||