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