Skip to content

M
million
Commit 817427e2 authored by 黄奎's avatar 黄奎
Browse files
Options

11

parent 69448347
Show whitespace changes
Inline Side-by-side
Showing with 176 additions and 179 deletions
src/boot/utils.js
View file @ 817427e2
...@@ -25,8 +25,7 @@ Vue.prototype.domainManager = function () { ...@@ -25,8 +25,7 @@ Vue.prototype.domainManager = function () {
if (domainNameUrl.indexOf('oytour') !== -1) { if (domainNameUrl.indexOf('oytour') !== -1) {
domainUrl = "https://reborn.oytour.com"; domainUrl = "https://reborn.oytour.com";
} }
// domainUrl = "https://reborn.oytour.com"; domainUrl = "https://reborn.oytour.com";
var obj = { var obj = {
//主地址 //主地址
DomainUrl: domainUrl, DomainUrl: domainUrl,
......
src/components/navs/hor-big-one.vue
View file @ 817427e2
...@@ -197,121 +197,80 @@ ...@@ -197,121 +197,80 @@
</style> </style>
<style> <style>
/* ===============================
q-btn 作为 hover 容器（关键）
================================ */
.social-btn { .social-btn {
position: relative; overflow: visible;
/* ✅ 弹层定位基准 */ padding: 0 6px;
overflow: visible !important;
/* ✅ 解除 q-btn 裁剪 */
display: inline-flex;
align-items: center;
height: 100%;
padding: 0 8px;
} }
/* =============================== .icon-img {
弹层主体 width: 24px;
================================ */ height: 24px;
.social-pop { display: block;
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 2000;
} }
/* hover 显示（重点） */ .pop-wrapper {
.social-btn:hover .social-pop { position: relative;
opacity: 1; padding-top: 10px;
visibility: visible;
pointer-events: auto;
} }
/* =============================== .pop-arrow {
箭头
================================ */
.arrow {
position: absolute; position: absolute;
top: -7px; top: 1px;
left: 50%; left: 50%;
width: 14px; width: 14px;
height: 14px; height: 14px;
background: #fff; background: #fff;
transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg);
box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.06);
z-index: 1;
} }
/* =============================== .pop-content {
公众号二维码 background: #fff;
================================ */ border-radius: 12px;
.social-qrcode {
padding: 18px 22px 14px; padding: 18px 22px 14px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}
.single {
text-align: center; text-align: center;
} }
.social-qrcode img { .single img {
width: 180px; width: 180px;
height: 180px; height: 180px;
border-radius: 8px; border-radius: 8px;
display: block; display: block;
} }
.social-tip { .multi {
margin-top: 10px;
font-size: 13px;
color: #666;
}
/* ===============================
小红书弹层
================================ */
.xhs-pop {
padding: 18px 20px 16px;
}
.xhs-list {
display: flex; display: flex;
gap: 16px; gap: 16px;
} }
.xhs-item { .multi-item {
width: 140px;
text-align: center; text-align: center;
} }
.xhs-item img { .multi-item img {
width: 140px; width: 140px;
height: 140px; height: 140px;
border-radius: 10px; border-radius: 10px;
display: block; display: block;
background: #f5f5f5;
} }
.xhs-tip { .tip {
margin-top: 8px; margin-top: 8px;
font-size: 13px; font-size: 13px;
color: #666; color: #666;
} }
/* =============================== .no-shadow-popup {
防止 toolbar 被挤（兜底） box-shadow: none !important;
================================ */ /* 去掉阴影 */
.q-toolbar { background: transparent !important;
flex-wrap: nowrap !important; /* 确保箭头背景可控 */
} }
</style> </style>
...@@ -345,38 +304,65 @@ ...@@ -345,38 +304,65 @@
</q-list> </q-list>
</q-menu> </q-menu>
</q-btn>--> </q-btn>-->
<!-- 公众号 -->
<q-btn flat dense class="social-btn" v-if="yyzlImg&&yyzlImg!=''"> <q-btn v-if="yyzlImg" flat dense class="social-btn" @mouseenter="show('wx')" @mouseleave="hide('wx')">
<img src="../../assets/img/wechat.png" class="btn-img" style="width:25px;height:25px;display: block;" /> <img src="../../assets/img/wechat.png" class="icon-img" />
<div class="social-pop"> <q-popup-proxy ref="wxPop" anchor="bottom middle" self="top middle" content-class="no-shadow-popup">
<div class="arrow"></div> <div class="pop-wrapper" @mouseenter="show('wx')" @mouseleave="hide('wx')">
<div class="social-qrcode"> <div class="pop-arrow"></div>
<div class="pop-content single">
<img :src="yyzlImg" /> <img :src="yyzlImg" />
<div class="social-tip">扫码关注公众号</div> <div class="tip">扫码关注公众号</div>
</div> </div>
</div> </div>
</q-popup-proxy>
</q-btn> </q-btn>
<q-btn flat dense class="social-btn" v-if="xhsImgList&&xhsImgList.length>0"> <!-- 微博 -->
<img src="../../assets/img/xiaohongshu.png" class="btn-img" style="width:25px;height:25px;display: block;" /> <q-btn v-if="wbImg" flat dense class="social-btn" @mouseenter="show('wb')" @mouseleave="hide('wb')"
<div class="social-pop xhs-pop"> content-class="no-shadow-popup">
<div class="arrow"></div> <img src="../../assets/img/weibo.png" class="icon-img" />
<div class="xhs-list"> <q-popup-proxy ref="wbPop" anchor="bottom middle" self="top middle">
<div class="xhs-item" v-for="(item, index) in xhsImgList" :key="index"> <div class="pop-wrapper" @mouseenter="show('wb')" @mouseleave="hide('wb')">
<div class="pop-arrow"></div>
<div class="pop-content single">
<img :src="wbImg" />
<div class="tip">扫码关注微博</div>
</div>
</div>
</q-popup-proxy>
</q-btn>
<!-- 小红书 -->
<q-btn v-if="xhsImgList.length" flat dense class="social-btn" @mouseenter="show('xhs')"
@mouseleave="hide('xhs')" content-class="no-shadow-popup">
<img src="../../assets/img/xiaohongshu.png" class="icon-img" />
<q-popup-proxy ref="xhsPop" anchor="bottom middle" self="top middle">
<div class="pop-wrapper" @mouseenter="show('xhs')" @mouseleave="hide('xhs')">
<div class="pop-arrow"></div>
<div class="pop-content multi">
<div class="multi-item" v-for="(item, index) in xhsImgList" :key="index">
<img :src="item" /> <img :src="item" />
<div class="xhs-tip">扫码关注小红书</div> <div class="tip">扫码关注小红书</div>
</div> </div>
</div> </div>
</div> </div>
</q-popup-proxy>
</q-btn> </q-btn>
<q-btn flat dense class="social-btn" v-if="wbImg&&wbImg!=''"> <!-- 企微 -->
<img src="../../assets/img/weibo.png" class="btn-img" style="width:25px;height:25px;display: block;" /> <q-btn v-if="qwImgList.length" flat dense class="social-btn" @mouseenter="show('qw')" @mouseleave="hide('qw')"
<div class="social-pop"> content-class="no-shadow-popup">
<div class="arrow"></div> <img src="../../assets/img/qwlogo.png" class="icon-img" />
<div class="social-qrcode"> <q-popup-proxy ref="qwPop" anchor="bottom middle" self="top middle">
<img :src="wbImg" /> <div class="pop-wrapper" @mouseenter="show('qw')" @mouseleave="hide('qw')">
<div class="social-tip">扫码关注微博</div> <div class="pop-arrow"></div>
<div class="pop-content multi">
<div class="multi-item" v-for="(item, index) in qwImgList" :key="index">
<img :src="item" />
<div class="tip">扫码咨询</div>
</div>
</div> </div>
</div> </div>
</q-popup-proxy>
</q-btn> </q-btn>
<q-btn v-if="LoginUser.id <= 0" label="注册" flat></q-btn> <q-btn v-if="LoginUser.id <= 0" label="注册" flat></q-btn>
<template v-if="LoginUser.token"> <template v-if="LoginUser.token">
...@@ -532,6 +518,7 @@ ...@@ -532,6 +518,7 @@
yyzlImg: "", //印象之旅 yyzlImg: "", //印象之旅
xhsImgList: [], //小红书 xhsImgList: [], //小红书
wbImg: "", //微博 wbImg: "", //微博
qwImgList: [], //企业微信
}; };
}, },
watch: { watch: {
...@@ -576,6 +563,9 @@ ...@@ -576,6 +563,9 @@
if (baseInfo.Config.platObj.xhsImgList && baseInfo.Config.platObj.xhsImgList.length > 0) { if (baseInfo.Config.platObj.xhsImgList && baseInfo.Config.platObj.xhsImgList.length > 0) {
this.xhsImgList = baseInfo.Config.platObj.xhsImgList; this.xhsImgList = baseInfo.Config.platObj.xhsImgList;
} }
if (baseInfo.Config.platObj.qwImgList && baseInfo.Config.platObj.qwImgList.length > 0) {
this.qwImgList = baseInfo.Config.platObj.qwImgList;
}
if (baseInfo.Config.platObj.wbImg) { if (baseInfo.Config.platObj.wbImg) {
this.wbImg = baseInfo.Config.platObj.wbImg; this.wbImg = baseInfo.Config.platObj.wbImg;
} }
...@@ -596,6 +586,12 @@ ...@@ -596,6 +586,12 @@
this.searchEndDate = newEndDateStr; this.searchEndDate = newEndDateStr;
}, },
methods: { methods: {
show(type) {
this.$refs[`${type}Pop`] && this.$refs[`${type}Pop`].show()
},
hide(type) {
this.$refs[`${type}Pop`] && this.$refs[`${type}Pop`].hide()
},
handler(event) { handler(event) {
event.preventDefault(); event.preventDefault();
}, },
......
src/components/navs/newHor-btm.vue
View file @ 817427e2
...@@ -146,64 +146,67 @@ ...@@ -146,64 +146,67 @@
</style> </style>
<style scoped> <style scoped>
/* ===== 平台整体（三列） ===== */ /* 整个平台区域 */
.platImg { .platTabs {
display: flex; display: flex;
gap: 40px; flex-direction: column;
/* 三列之间的间距 */ align-items: center;
align-items: flex-start;
justify-content: flex-start;
margin-top: 16px;
} }
/* ===== 单列 ===== */ /* tabs 导航 */
.plat-col { .platTabs-nav {
display: flex; display: flex;
flex-direction: column; gap: 24px;
align-items: center; margin-bottom: 12px;
gap: 10px; }
min-width: 120px;
/* 保证三列对齐 */ .platTabs-tab {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
position: relative;
padding-bottom: 4px;
transition: color 0.3s;
} }
/* 平台标题 */ .platTabs-tab:hover,
.plat-title { .platTabs-tab.active {
font-size: 13px; color: #fff;
color: rgba(255, 255, 255, .8); }
line-height: 1;
white-space: nowrap; .platTabs-tab.active::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #fff;
}
/* 内容区，防止切换时高度抖动 */
.platTabs-content {
min-height: 170px;
display: flex;
align-items: center;
} }
/* 二维码区域 */ /* 二维码容器：从左 → 右，自动换行 */
.plat-qrs { .plat-qrs {
display: flex; display: flex;
gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
/* 小红书多张自动换行 */ gap: 10px;
justify-content: center; justify-content: center;
/* 可改为 flex-start */
} }
/* 二维码 */ /* 单个二维码 */
.plat-qrs img { .plat-qrs img {
width: 80px; width: 80px;
height: 80px; height: 80px;
object-fit: cover; object-fit: cover;
border-radius: 6px; display: block;
background: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
/* 手机端 */
@media (max-width: 768px) {
.platImg {
justify-content: center;
gap: 24px;
}
.plat-qrs img {
width: 60px;
height: 60px;
}
} }
</style> </style>
...@@ -246,23 +249,6 @@ ...@@ -246,23 +249,6 @@
</div> </div>
<div :class="[$q.platform.is.desktop?'':'q-pt-lg']"> <div :class="[$q.platform.is.desktop?'':'q-pt-lg']">
<ul class="text-xs font-light newHor-right"> <ul class="text-xs font-light newHor-right">
<!-- <li class="flex -mx-4 my-2 tracking-1 sm:justify-end">
<span class="inline-block px-4 icon-slash icon-slash-white opacity-70">follow us</span>
<div class="px-5 -mx-1">
<a href="https://www.facebook.com/GoodayTravel" target="_blank"
class="px-1 opacity-70 md:hover:opacity-100 transition-base">
<i class="icon-facebook h5 pointer-events-none"></i>
</a>
<a href="https://line.me/R/ti/p/%40497wwbbn" target="_blank"
class="px-1 opacity-70 md:hover:opacity-100 transition-base">
<i class="icon-line h5 pointer-events-none"></i>
</a>
<a href="https://www.youtube.com/channel/UCpDO62H5e0dY-PcQc2aTfcQ/featured"
target="_blank" class="px-1 opacity-70 md:hover:opacity-100 transition-base">
<i class="icon-youtube h5 pointer-events-none"></i>
</a>
</div>
</li> -->
<li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70"> <li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70">
<span class="inline-block px-4 icon-slash icon-slash-white">代表人</span> <span class="inline-block px-4 icon-slash icon-slash-white">代表人</span>
<p class="px-4">{{dataList.Config.Behalf}}</p> <p class="px-4">{{dataList.Config.Behalf}}</p>
...@@ -272,10 +258,7 @@ ...@@ -272,10 +258,7 @@
<li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70"> <li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70">
<p class="px-4">{{dataList.Config.Name}}</p> <p class="px-4">{{dataList.Config.Name}}</p>
</li> </li>
<!-- <li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70">
<span class="inline-block px-4 icon-slash icon-slash-white">代理旅行社</span>
<p class="px-4">{{dataList.Config.TypeStr}}</p>
</li> -->
<li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70"> <li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70">
<p class="px-4">四川省成都市锦江区青和里南段</p> <p class="px-4">四川省成都市锦江区青和里南段</p>
</li> </li>
...@@ -284,26 +267,28 @@ ...@@ -284,26 +267,28 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="platImg"> <div class="platTabs">
<!-- 公众号 --> <!-- tabs -->
<div class="plat-col" v-if="yyzlImg&&yyzlImg!=''"> <div class="platTabs-nav">
<div class="plat-title">公众号</div> <span v-for="tab in tabs" :key="tab.key" :class="['platTabs-tab', { active: activeTab === tab.key }]"
<div class="plat-qrs"> @mouseenter="activeTab = tab.key">
<img :src="yyzlImg" /> {{ tab.label }}
</span>
</div> </div>
<!-- content -->
<div class="platTabs-content">
<!-- 公众号 / 微博 -->
<div v-show="activeTab === 'mp'" class="plat-qrs">
<img v-if="yyzlImg" :src="yyzlImg" />
<img v-if="wbImg" :src="wbImg" />
</div> </div>
<!-- 小红书 --> <!-- 小红书 -->
<div class="plat-col" v-if="xhsImgList&&xhsImgList.length>0"> <div v-show="activeTab === 'xhs'" class="plat-qrs">
<div class="plat-title">小红书</div>
<div class="plat-qrs">
<img v-for="(item, index) in xhsImgList" :key="index" :src="item" /> <img v-for="(item, index) in xhsImgList" :key="index" :src="item" />
</div> </div>
</div> <!-- 企业微信 -->
<!-- 微博 --> <div v-show="activeTab === 'qw'" class="plat-qrs">
<div class="plat-col" v-if="wbImg&&wbImg!=''"> <img v-for="(item, index) in qwImgList" :key="index" :src="item" />
<div class="plat-title">微博</div>
<div class="plat-qrs">
<img :src="wbImg" />
</div> </div>
</div> </div>
</div> </div>
...@@ -327,7 +312,6 @@ ...@@ -327,7 +312,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
...@@ -342,6 +326,21 @@ ...@@ -342,6 +326,21 @@
yyzlImg: "", //印象之旅 yyzlImg: "", //印象之旅
xhsImgList: [], //小红书 xhsImgList: [], //小红书
wbImg: "", //微博 wbImg: "", //微博
qwImgList: [], //企业微信
activeTab: 'mp',
tabs: [{
key: 'mp',
label: '公众号 / 微博'
},
{
key: 'xhs',
label: '小红书'
},
{
key: 'qw',
label: '企业微信'
}
],
}; };
}, },
destroyed() { destroyed() {
...@@ -368,6 +367,9 @@ ...@@ -368,6 +367,9 @@
if (baseInfo.Config.platObj.xhsImgList && baseInfo.Config.platObj.xhsImgList.length > 0) { if (baseInfo.Config.platObj.xhsImgList && baseInfo.Config.platObj.xhsImgList.length > 0) {
this.xhsImgList = baseInfo.Config.platObj.xhsImgList; this.xhsImgList = baseInfo.Config.platObj.xhsImgList;
} }
if (baseInfo.Config.platObj.qwImgList && baseInfo.Config.platObj.qwImgList.length > 0) {
this.qwImgList = baseInfo.Config.platObj.qwImgList;
}
if (baseInfo.Config.platObj.wbImg) { if (baseInfo.Config.platObj.wbImg) {
this.wbImg = baseInfo.Config.platObj.wbImg; this.wbImg = baseInfo.Config.platObj.wbImg;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment