Skip to content

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

11

parent 69448347
Hide 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 () {
if (domainNameUrl.indexOf('oytour') !== -1) {
domainUrl = "https://reborn.oytour.com";
}
// domainUrl = "https://reborn.oytour.com";
domainUrl = "https://reborn.oytour.com";
var obj = {
//主地址
DomainUrl: domainUrl,
......
src/components/navs/hor-big-one.vue
View file @ 817427e2
......@@ -197,121 +197,80 @@
</style>
<style>
/* ===============================
q-btn 作为 hover 容器（关键）
================================ */
.social-btn {
position: relative;
/* ✅ 弹层定位基准 */
overflow: visible !important;
/* ✅ 解除 q-btn 裁剪 */
display: inline-flex;
align-items: center;
height: 100%;
padding: 0 8px;
overflow: visible;
padding: 0 6px;
}
/* ===============================
弹层主体
================================ */
.social-pop {
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;
.icon-img {
width: 24px;
height: 24px;
display: block;
}
/* hover 显示（重点） */
.social-btn:hover .social-pop {
opacity: 1;
visibility: visible;
pointer-events: auto;
.pop-wrapper {
position: relative;
padding-top: 10px;
}
/* ===============================
箭头
================================ */
.arrow {
.pop-arrow {
position: absolute;
top: -7px;
top: 1px;
left: 50%;
width: 14px;
height: 14px;
background: #fff;
transform: translateX(-50%) rotate(45deg);
box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.06);
z-index: 1;
}
/* ===============================
公众号二维码
================================ */
.social-qrcode {
.pop-content {
background: #fff;
border-radius: 12px;
padding: 18px 22px 14px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}
.single {
text-align: center;
}
.social-qrcode img {
.single img {
width: 180px;
height: 180px;
border-radius: 8px;
display: block;
}
.social-tip {
margin-top: 10px;
font-size: 13px;
color: #666;
}
/* ===============================
小红书弹层
================================ */
.xhs-pop {
padding: 18px 20px 16px;
}
.xhs-list {
.multi {
display: flex;
gap: 16px;
}
.xhs-item {
width: 140px;
.multi-item {
text-align: center;
}
.xhs-item img {
.multi-item img {
width: 140px;
height: 140px;
border-radius: 10px;
display: block;
background: #f5f5f5;
}
.xhs-tip {
.tip {
margin-top: 8px;
font-size: 13px;
color: #666;
}
/* ===============================
防止 toolbar 被挤（兜底）
================================ */
.q-toolbar {
flex-wrap: nowrap !important;
.no-shadow-popup {
box-shadow: none !important;
/* 去掉阴影 */
background: transparent !important;
/* 确保箭头背景可控 */
}
</style>
......@@ -345,38 +304,65 @@
</q-list>
</q-menu>
</q-btn>-->
<q-btn flat dense class="social-btn" v-if="yyzlImg&&yyzlImg!=''">
<img src="../../assets/img/wechat.png" class="btn-img" style="width:25px;height:25px;display: block;" />
<div class="social-pop">
<div class="arrow"></div>
<div class="social-qrcode">
<img :src="yyzlImg" />
<div class="social-tip">扫码关注公众号</div>
<!-- 公众号 -->
<q-btn v-if="yyzlImg" flat dense class="social-btn" @mouseenter="show('wx')" @mouseleave="hide('wx')">
<img src="../../assets/img/wechat.png" class="icon-img" />
<q-popup-proxy ref="wxPop" anchor="bottom middle" self="top middle" content-class="no-shadow-popup">
<div class="pop-wrapper" @mouseenter="show('wx')" @mouseleave="hide('wx')">
<div class="pop-arrow"></div>
<div class="pop-content single">
<img :src="yyzlImg" />
<div class="tip">扫码关注公众号</div>
</div>
</div>
</div>
</q-popup-proxy>
</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;" />
<div class="social-pop xhs-pop">
<div class="arrow"></div>
<div class="xhs-list">
<div class="xhs-item" v-for="(item, index) in xhsImgList" :key="index">
<img :src="item" />
<div class="xhs-tip">扫码关注小红书</div>
<!-- 微博 -->
<q-btn v-if="wbImg" flat dense class="social-btn" @mouseenter="show('wb')" @mouseleave="hide('wb')"
content-class="no-shadow-popup">
<img src="../../assets/img/weibo.png" class="icon-img" />
<q-popup-proxy ref="wbPop" anchor="bottom middle" self="top middle">
<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>
</div>
</q-popup-proxy>
</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;" />
<div class="social-pop">
<div class="arrow"></div>
<div class="social-qrcode">
<img :src="wbImg" />
<div class="social-tip">扫码关注微博</div>
<!-- 小红书 -->
<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" />
<div class="tip">扫码关注小红书</div>
</div>
</div>
</div>
</div>
</q-popup-proxy>
</q-btn>
<!-- 企微 -->
<q-btn v-if="qwImgList.length" flat dense class="social-btn" @mouseenter="show('qw')" @mouseleave="hide('qw')"
content-class="no-shadow-popup">
<img src="../../assets/img/qwlogo.png" class="icon-img" />
<q-popup-proxy ref="qwPop" anchor="bottom middle" self="top middle">
<div class="pop-wrapper" @mouseenter="show('qw')" @mouseleave="hide('qw')">
<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>
</q-popup-proxy>
</q-btn>
<q-btn v-if="LoginUser.id <= 0" label="注册" flat></q-btn>
<template v-if="LoginUser.token">
......@@ -532,6 +518,7 @@
yyzlImg: "", //印象之旅
xhsImgList: [], //小红书
wbImg: "", //微博
qwImgList: [], //企业微信
};
},
watch: {
......@@ -576,6 +563,9 @@
if (baseInfo.Config.platObj.xhsImgList && baseInfo.Config.platObj.xhsImgList.length > 0) {
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) {
this.wbImg = baseInfo.Config.platObj.wbImg;
}
......@@ -596,6 +586,12 @@
this.searchEndDate = newEndDateStr;
},
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) {
event.preventDefault();
},
......
src/components/navs/newHor-btm.vue
View file @ 817427e2
......@@ -146,64 +146,67 @@
</style>
<style scoped>
/* ===== 平台整体（三列） ===== */
.platImg {
/* 整个平台区域 */
.platTabs {
display: flex;
gap: 40px;
/* 三列之间的间距 */
align-items: flex-start;
justify-content: flex-start;
margin-top: 16px;
flex-direction: column;
align-items: center;
}
/* ===== 单列 ===== */
.plat-col {
/* tabs 导航 */
.platTabs-nav {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
min-width: 120px;
/* 保证三列对齐 */
gap: 24px;
margin-bottom: 12px;
}
.platTabs-tab {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
position: relative;
padding-bottom: 4px;
transition: color 0.3s;
}
/* 平台标题 */
.plat-title {
font-size: 13px;
color: rgba(255, 255, 255, .8);
line-height: 1;
white-space: nowrap;
.platTabs-tab:hover,
.platTabs-tab.active {
color: #fff;
}
.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 {
display: flex;
gap: 10px;
flex-wrap: wrap;
/* 小红书多张自动换行 */
gap: 10px;
justify-content: center;
/* 可改为 flex-start */
}
/* 二维码 */
/* 单个二维码 */
.plat-qrs img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 6px;
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;
}
display: block;
}
</style>
......@@ -246,23 +249,6 @@
</div>
<div :class="[$q.platform.is.desktop?'':'q-pt-lg']">
<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">
<span class="inline-block px-4 icon-slash icon-slash-white">代表人</span>
<p class="px-4">{{dataList.Config.Behalf}}</p>
......@@ -272,10 +258,7 @@
<li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70">
<p class="px-4">{{dataList.Config.Name}}</p>
</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">
<p class="px-4">四川省成都市锦江区青和里南段</p>
</li>
......@@ -284,26 +267,28 @@
</li>
</ul>
</div>
<div class="platImg">
<!-- 公众号 -->
<div class="plat-col" v-if="yyzlImg&&yyzlImg!=''">
<div class="plat-title">公众号</div>
<div class="plat-qrs">
<img :src="yyzlImg" />
</div>
<div class="platTabs">
<!-- tabs -->
<div class="platTabs-nav">
<span v-for="tab in tabs" :key="tab.key" :class="['platTabs-tab', { active: activeTab === tab.key }]"
@mouseenter="activeTab = tab.key">
{{ tab.label }}
</span>
</div>
<!-- 小红书 -->
<div class="plat-col" v-if="xhsImgList&&xhsImgList.length>0">
<div class="plat-title">小红书</div>
<div class="plat-qrs">
<!-- 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 v-show="activeTab === 'xhs'" class="plat-qrs">
<img v-for="(item, index) in xhsImgList" :key="index" :src="item" />
</div>
</div>
<!-- 微博 -->
<div class="plat-col" v-if="wbImg&&wbImg!=''">
<div class="plat-title">微博</div>
<div class="plat-qrs">
<img :src="wbImg" />
<!-- 企业微信 -->
<div v-show="activeTab === 'qw'" class="plat-qrs">
<img v-for="(item, index) in qwImgList" :key="index" :src="item" />
</div>
</div>
</div>
......@@ -327,7 +312,6 @@
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -342,6 +326,21 @@
yyzlImg: "", //印象之旅
xhsImgList: [], //小红书
wbImg: "", //微博
qwImgList: [], //企业微信
activeTab: 'mp',
tabs: [{
key: 'mp',
label: '公众号 / 微博'
},
{
key: 'xhs',
label: '小红书'
},
{
key: 'qw',
label: '企业微信'
}
],
};
},
destroyed() {
......@@ -368,6 +367,9 @@
if (baseInfo.Config.platObj.xhsImgList && baseInfo.Config.platObj.xhsImgList.length > 0) {
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) {
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