Skip to content

M
million
Commit 1e782eeb authored by youjie's avatar youjie
Browse files
Options

首页 搜索

parent 35405370
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 494 additions and 111 deletions
src/App.vue
View file @ 1e782eeb
......@@ -6,8 +6,50 @@
<script>
export default {
name: "App"
name: "App",
methods: {
disableZoom(event){
if (event.ctrlKey && (event.key === '+' || event.key === '-' || event.key === '=')) {
event.preventDefault(); // 阻止默认行为
console.log('缩放功能已禁用');
}
},
disableZoomByWheel(event) {
if (event.ctrlKey) {
event.preventDefault(); // 阻止缩放
console.log('鼠标滚轮缩放功能已禁用');
}
},
adjustZoom() {
console.log('execute...')
if(window.innerWidth>768){
const scale = window.devicePixelRatio; // 获取用户的系统缩放比例
document.body.style.zoom = 1 / scale; // 设置缩放以抵消系统缩放
// 获取实际视口高度和宽度
const vh = window.innerHeight * scale;
const vw = window.innerWidth * scale;
// 将计算结果应用为 CSS 自定义属性
document.documentElement.style.setProperty('--vh', `${vh}px`);
document.documentElement.style.setProperty('--vw', `${vw}px`);
}
}
},
mounted() {
window.addEventListener('keydown', (event) => this.disableZoom(event));
window.onload = this.adjustZoom();
window.addEventListener('wheel', (event) => this.disableZoomByWheel(event), { passive: false });
window.addEventListener('resize',()=> this.adjustZoom())
},
unmounted() {
window.removeEventListener('keydown', (event) => this.disableZoom(event));
window.removeEventListener('wheel', (event) => this.disableZoomByWheel(event), { passive: false });
window.removeEventListener('resize', ()=>this.adjustZoom())
}
};
</script>
<style>
@import url("//at.alicdn.com/t/c/font_1890699_5zxmcxmwvtf.css");
......
src/assets/css/home.css
View file @ 1e782eeb
......@@ -48,11 +48,11 @@ ul,li{
font-size: 18px;
}
.remText{
font-size: .8rem;
font-size: 16px;
}
.remSubText{
font-size: 1rem;
font-size: 16px;
}
.duration2{
......@@ -79,6 +79,9 @@ ul,li{
.h100{
height: 100%;
}
.vh100{
height: 100vh;
}
.right0{
right: 0;
}
......@@ -136,7 +139,7 @@ ul,li{
margin-top: 0px;
}
.indexNavxcT{
padding-top: 50%;
}
.homeContainer{
max-width: 100%;
......@@ -254,7 +257,7 @@ ul,li{
margin-top: 50px;
}
.indexNavxcT{
padding-top: 20%;
}
.gap-1{
padding-bottom: 55px;
......@@ -330,7 +333,7 @@ ul,li{
}
@media screen and (min-width: 992px) {
.indexNavxcT{
padding-top: 20%;
}
.swipercomTvR2Bj{
top: 100%;
......@@ -409,7 +412,7 @@ ul,li{
}
@media screen and (min-width: 1280px) {
.indexNavxcT{
padding-top: 20%;
}
.homeContainer{
max-width: 1280px;
......@@ -448,8 +451,11 @@ ul,li{
}
}
@media screen and (min-width: 1440px) {
.MenuListBoxH{
/* min-height: 150px; */
}
.indexNavxcT{
padding-top: 20%;
}
.swipercomSubEnLenR2{
font-size: 1.8rem;
......@@ -520,11 +526,14 @@ ul,li{
}
}
@media screen and (min-width: 1800px) {
.MenuListBoxH{
/* min-height: 300px; */
}
.indexRoll2Hd{
width: 468px
}
.indexNavxcT{
padding-top: 20%;
}
.swipercomSubEnLenR2{
font-size: 2rem;
......@@ -544,10 +553,10 @@ ul,li{
padding-left: 240px;
}
.w3{
width: 50%;
width: 40%;
}
.insli-leftDescr{
width: 55%;
width: 266px;
}
.swipercomTitle{
padding: 40px 0;
......
src/boot/utils.js
View file @ 1e782eeb
......@@ -9,8 +9,9 @@ import message from './message'
import product from './product'
import VueViewer from 'v-viewer'
// import VueCoreVideoPlayer from 'vue-core-video-player'
import ElementUI from "element-ui";
Vue.use(ElementUI);
import 'animate.css';
// 或者只引入需要的动画类
import 'animate.css/source/attention_seekers/bounce.css';
Vue.prototype.$EventBus = new Vue()
Vue.use(VueCoreVideoPlayer)
Vue.use(VueViewer)
......@@ -29,7 +30,6 @@ Vue.prototype.domainManager = function() {
domainUrl = "http://testapi.oytour.com";
} else if (domainNameUrl.indexOf('oytour') !== -1) {
domainUrl = "http://reborn.oytour.com";
domainUrl = "http://192.168.5.46";
// domainUrl = 'http://192.168.10.68' //'http://192.168.10.226:8015' ''http://192.168.10.9:8083' '
}
var obj = {
......
src/components/home/indexNav.vue
View file @ 1e782eeb
This diff is collapsed.
src/components/home/indexRoll1.vue
View file @ 1e782eeb
<template>
<div class="indexRoll1Box" @mouseover.stop.prevent="handleMouseMove" @mouseleave.stop.prevent="handleMouseLeave"
:class="[Current=='left'?'activeL':'activeR']"
@click="carousel(Current)">
:class="[Current=='left'?'activeL':Current=='right'?'activeR':'']"
@click.stop="carousel(Current)">
<div class="relative gap-1 overflow-hidden"
:style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}">
<div class="homeContainer">
......@@ -32,10 +32,10 @@
<swiper-slide :key="index" :index="index"
class="">
<div class="relative" :style="{'background':`url(${item.FileUrl})no-repeat`,'background-size':'cover'}"
style="border-radius:10px;" @click.stop="OpenNewUrl(item.LinkUrl)" @mouseover.stop.prevent="getINdex(index)">
style="border-radius:10px;" @click.stop="OpenUrl(item.LinkUrl,index)" >
<template v-if="item.FileType==1">
<q-img :src="item.FileUrl" no-default-spinner alt="image" :ratio="16/9" fill="cover"
@click.stop="OpenNewUrl(item.LinkUrl)" class="">
@click.stop="OpenUrl(item.LinkUrl,index)" class="">
<template v-slot:error>
<div class="absolute inSliMLogo">
<q-img v-if="plugData.MLogo" :src="plugData.MLogo"
......@@ -46,7 +46,7 @@
</template>
<q-img v-else alt="" :ratio="16/9" fill="cover">
<q-video class="" style="width: 100%;" :src="item.FileUrl" frameborder="0"
allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/>
allowfullscreen @click.stop="OpenUrl(item.LinkUrl,index)"/>
</q-img>
<div class="swipercomSubEnLen absolute bg-white row items-center justify-center">
<div class="swipercomSubEnNum row" v-if="windowWidth>=992">
......@@ -202,9 +202,9 @@
}, 500);
},
methods: {
getINdex(index){
this.isRight = this.$refs.mySwiper.swiper.realIndex!=index
// console.log(this.slide,index)
OpenUrl(URL,index) {
if(index!=this.slide) return this.carousel(this.Current)
this.OpenNewUrl(URL)
},
slideChangeTransitionEnd(){
this.slide = this.$refs.mySwiper.swiper.realIndex
......@@ -225,7 +225,7 @@
}
},
handleMouseMove(el) {
if(this.windowWidth<768) return
if(this.windowWidth<768) return this.Current = null
if(!this.isRight){
this.setRight()
}
......@@ -238,15 +238,16 @@
}else if(el.x>width) {
this.Current = 'right'
}
this.X = el.x
this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
// this.X = el.x
// this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
},
setRight(){
this.isRight = true
},
handleMouseLeave(e){
this.Current = null
return
this.isRight = false
console.log(this.isRight ,'=====')
}
}
}
......
src/components/home/indexRoll2.vue
View file @ 1e782eeb
......@@ -28,6 +28,11 @@
class="swiper" @slideChange="onSlideChange">
<swiper-slide :key="index" :index="index" style="width: 12.91vw;"
class="cursor-pointer swiperR2W" v-for="(item, index) in plugData.NavList">
<div class="relative">
<div class="swipercomSubEnLenR2 absolute font-serifEn">
<span class="writing-modes-vertical">{{item.SubEnName}}</span>
</div>
</div>
<div class="relative swiperR2Hover">
<template v-if="item.FileType==1">
<q-img :src="item.FileUrl" alt="image" :ratio="0.64" fill="cover"
......@@ -44,9 +49,7 @@
<q-video class="cursor-pointer" style="width: 100%;" :src="item.FileUrl" frameborder="0"
allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/>
</q-img>
<div class="swipercomSubEnLenR2 absolute writing-modes-vertical font-serifEn">
{{item.SubEnName}}
</div>
<div class="swipercomTvR2BjBox">
<div class="swipercomTvR2Bj absolute">&nbsp;</div>
<div class="swipercomTvR2 absolute">
......@@ -93,6 +96,7 @@
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
const scale = 1 / window.devicePixelRatio;
export default {
components: { swiper, swiperSlide },
props: ['plugData','windowWidth','top','currentHeight'],
......@@ -106,43 +110,43 @@
spaceBetween: 50,
breakpoints: {
1950: {
slidesPerView: 5.8,
slidesPerView: 5.8/scale,
spaceBetween: 40
},
1800: {
slidesPerView: 4.5,
slidesPerView: 4.5/scale,
spaceBetween: 40
},
1700: {
slidesPerView: 3,
slidesPerView: 3/scale,
spaceBetween: 40
},
1600: {
slidesPerView: 3,
slidesPerView: 3/scale,
spaceBetween: 40
},
1500: {
slidesPerView: 4,
slidesPerView: 4/scale,
spaceBetween: 30
},
1400: {
slidesPerView: 4,
slidesPerView: 4/scale,
spaceBetween: 30
},
1300: {
slidesPerView:3.7,
slidesPerView:3.7/scale,
spaceBetween: 30
},
1200: {
slidesPerView:3.15,
slidesPerView:3.15/scale,
spaceBetween: 30
},
1100: {
slidesPerView:2.7,
slidesPerView:2.7/scale,
spaceBetween: 30
},
800: {
slidesPerView:1.3,
slidesPerView:1.3/scale,
spaceBetween: 30
},
640: {
......@@ -365,9 +369,10 @@
font-size: 25px;
}
.swipercomR2{
.swiperR2W{
/* max-width: 12.91vw !important; */
}
}
.swiperR2W{
}
.swipercomSubEnLenR2{
font-size: 2rem;
......@@ -375,6 +380,7 @@
top: -1rem;
letter-spacing: .5rem;
color: $secondary;
z-index: 2;
}
.swipercomTvR2BjBox{
......
src/components/home/indexSlider.vue
View file @ 1e782eeb
<template>
<!-- no-course -->
<!-- :class="[Current=='left'?'activeL':Current=='right'?'activeR':'']" -->
<!-- :style="[Current=='left'?`cursor:url(${cursorUrlL}),auto,fontSize:${cursorSize} + 'px'`:Current=='right'?`cursor:url(${cursorUrlR}),auto,fontSize:${cursorSize} + 'px'`:''
]" -->
<div class="indexSliderBox animate__animated duration2" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave"
:class="[Current=='left'?'activeL':'activeR']"
:style="{ cursor: 'url(' + `${Current=='left'?cursorUrlL:Current=='right'?cursorUrlR:''}` + '), auto',
fontSize: cursorSize + 'px'}"
@click="carousel(Current)">
<div class="relative gap-1 overflow-hidden"
:style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}"
......@@ -128,6 +132,9 @@ export default {
autoplay: 40000000,
FileUrlList: [],
isRight: false,
cursorUrlL: require('../../assets/img/home/left.png'),
cursorUrlR: require('../../assets/img/home/right.png'),
cursorSize: 16,
}
},
watch: {
......@@ -173,18 +180,18 @@ export default {
}
},
handleMouseMove(el) {
if(this.windowWidth<768) return
if(this.windowWidth<768) return this.Current = null
if(!this.isRight) this.isRight = true
let width = this.windowWidth/2
if(el.x<width){
this.Current = 'left'
this.X = el.x+50
// this.X = el.x+50
}else if(el.x>width) {
this.Current = 'right'
this.X = el.x-50
// this.X = el.x-50
}
this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
// this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
},
handleMouseLeave(){
this.isRight = false
......@@ -209,11 +216,19 @@ export default {
height: 100%;
}
.activeL{
cursor: url('../../assets/img/home/left.png'),auto !important;
cursor: url('../../assets/img/home/left.png'),auto!important;
/* 禁止缩放cursor */
-webkit-user-zoom: fixed !important;
-moz-user-zoom: fixed !important;
user-zoom: fixed !important;
/* 以下是针对IE的额外设置 */
-ms-user-zoom: fixed !important;
-ms-touch-action: none !important;
}
.activeR{
cursor: url('../../assets/img/home/right.png'),auto !important;
}
.indexSliderBox.q-py{
padding: 80px 0 40px 0;
}
......
src/components/home/mouse.vue
View file @ 1e782eeb
......@@ -21,7 +21,7 @@
</script>
<style scoped>
.sliderRight{
z-index: 9;
z-index: 1;
opacity: 0;
margin: -2rem 0 0 -2rem;
--tw-backdrop-blur: blur(4px);
......
src/components/navs/newHor-btm.vue
View file @ 1e782eeb
......@@ -143,7 +143,7 @@
</li>
</ul>
</div>
<div :class="[windowWidth<1300?'hidden':'']">
<div :class="[!$q.platform.is.desktop?'hidden':'']">
<ul class="l-footer--list row">
<li class="l-footer--list__item relative cursor-pointer" v-for="(item,index) in plugData.MenuList">
<a @click="OpenNewUrl(item.LinkUrl)"
......
src/css/app.scss
View file @ 1e782eeb
......@@ -162,4 +162,7 @@
}
.border-b {
border-bottom: 1px solid #eee;
}
\ No newline at end of file
}
.window-height{
height: var(--vh) !important;
}
src/layouts/HomeLayout.vue
View file @ 1e782eeb
......@@ -28,7 +28,7 @@
</style>
<template>
<q-layout view="hHh lpr fFf">
<hor-big-one v-if="isSearch&&windowWidth>1280" :base-data="baseinfo" :dataList="dataList" ref="webhead"></hor-big-one>
<hor-big-one v-if="isSearch&&windowWidth>=768" :base-data="baseinfo" :dataList="dataList" ref="webhead"></hor-big-one>
<!-- <hor-big-two v-if="headType==2" :base-data="baseinfo" ref="webhead"></hor-big-two> -->
<q-page-container>
<div class="flex justify-between" v-if="showUserInfo" :style="$q.platform.is.desktop ? 'width: 1200px; margin: 0 auto' : ''">
......
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