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