完成pc和移动端适配

mobile
wangchenguang 2 years ago
parent 9c69134755
commit b4db275284
  1. 13
      src/App.vue
  2. 14
      src/components/menuTree/index.vue
  3. 92
      src/layouts/header/index.vue
  4. 18
      src/layouts/navbar/index.vue
  5. 49
      src/pages/about/index.vue
  6. 12
      src/pages/article/index.vue
  7. 25
      src/pages/column/index.vue
  8. 27
      src/pages/home/index.vue
  9. 6
      src/pages/overviewLocation/index.vue
  10. 3
      src/pages/overviewTrailer/index.vue
  11. 2
      src/pages/sfel/index.vue
  12. 36
      src/pages/talent/index.vue
  13. 3
      src/setting.js

@ -19,8 +19,8 @@ export default {
window.addEventListener('beforeunload', () => { window.addEventListener('beforeunload', () => {
util.local.set(Setting.storeKey, this.$store.state); util.local.set(Setting.storeKey, this.$store.state);
}); });
// truePCfalse
function IsPC() { function IsPCModel() {
var userAgentInfo = navigator.userAgent; var userAgentInfo = navigator.userAgent;
var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']; var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
var flagPc = true; var flagPc = true;
@ -32,8 +32,15 @@ export default {
} }
return flagPc; return flagPc;
} }
var flagZt = IsPC(); var flagZt = IsPCModel();
this.$store.commit('updateModelType', flagZt) this.$store.commit('updateModelType', flagZt)
window.onresize = () => {
if(document.body.clientWidth <= 1200) {
this.$store.commit('updateModelType', false)
}else {
this.$store.commit('updateModelType', true)
}
}
} }
}; };
</script> </script>

@ -32,4 +32,18 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@media (min-width: 280px) and (max-width: 750px) {
.menu-child{
/deep/ .el-menu-item {
height: 40px;line-height: 40px;
}
}
.el-submenu{
/deep/ .el-submenu__title{
height: 40px;
line-height: 40px;
font-size: 1rem;
}
}
}
</style> </style>

@ -3,6 +3,8 @@
<a class="logo" @click="toIndex"> <a class="logo" @click="toIndex">
<img :src="require('@/assets/images/' + (isSfel ? 'logo2' : isHome ? 'logo' : 'logo-black') + '.png')" alt=""> <img :src="require('@/assets/images/' + (isSfel ? 'logo2' : isHome ? 'logo' : 'logo-black') + '.png')" alt="">
</a> </a>
<!-- pc端 -->
<template v-if="$store.getters.getModelType">
<navbar ref="nav" :isHome.sync="isHome"></navbar> <navbar ref="nav" :isHome.sync="isHome"></navbar>
<div class="tools"> <div class="tools">
<img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch"> <img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch">
@ -13,6 +15,24 @@
<i class="el-icon-close close-icon" @click="showSearch = false"></i> <i class="el-icon-close close-icon" @click="showSearch = false"></i>
</div> </div>
</div> </div>
</template>
<!-- 手机端 -->
<template v-else>
<i class="rightBox" :class="modelType ? 'el-icon-s-fold': 'el-icon-s-unfold' " @click="updateModelType"></i>
<div class="contentBox" v-show="modelType">
<navbar ref="nav" :isHome.sync="isHome" :updateModelType="updateType"></navbar>
<div class="modelBox">
<div class="searchBox"><img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch"></div>
<div class="languageBox"><img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang"></div>
<div v-if="showSearch" class="search-wrap" @click.stop="stop">
<input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
<img class="search-icon" src="@/assets/images/search.png" alt="" @click="handleSearch">
<i class="el-icon-close close-icon" @click="showSearch = false"></i>
</div>
</div>
</div>
</template>
</div> </div>
</template> </template>
<script> <script>
@ -24,7 +44,8 @@ export default {
isHome: this.$route.path === '/home' || this.$route.path === '/sfel', isHome: this.$route.path === '/home' || this.$route.path === '/sfel',
showSearch: false, showSearch: false,
title: '', title: '',
searchTimer: null searchTimer: null,
modelType: false
}; };
}, },
components: { components: {
@ -84,10 +105,18 @@ export default {
// //
handleSearch() { handleSearch() {
this.setKeyword(this.title) this.setKeyword(this.title)
this.modelType = !this.modelType
if (this.title) { if (this.title) {
this.showSearch = false this.showSearch = false
this.$router.push(`/column/result`) this.$router.push(`/column/result`)
} }
},
//
updateModelType() {
this.modelType = !this.modelType
},
updateType(type) {
this.modelType = type
} }
} }
}; };
@ -100,7 +129,7 @@ $height: 90px;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
min-width: $min-width; // min-width: $min-width;
height: $height; height: $height;
box-sizing: content-box; box-sizing: content-box;
&:not(.channel) { &:not(.channel) {
@ -111,7 +140,7 @@ $height: 90px;
position: absolute; position: absolute;
top: 0; top: 0;
left: 5%; left: 5%;
font-size: 20px; font-size: 1.428rem;
color: #333330; color: #333330;
line-height: $height; line-height: $height;
cursor: pointer; cursor: pointer;
@ -144,7 +173,7 @@ $height: 90px;
width: 300px; width: 300px;
height: 40px; height: 40px;
padding: 0 40px 0 15px; padding: 0 40px 0 15px;
font-size: 16px; font-size: 1.14rem;
color: #333; color: #333;
line-height: 46px; line-height: 46px;
border: 0; border: 0;
@ -158,10 +187,43 @@ $height: 90px;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
} }
.close-icon { .close-icon {
font-size: 28px; font-size: 2rem;
cursor: pointer; cursor: pointer;
} }
} }
.menu-child {
/deep/ .el-submenu__title{
font-size: 1rem;
}
}
.rightBox{
font-size: 3.57rem;
position: absolute;
right: 10px;
top: 20px;
}
.contentBox{
width: 100%;
position: absolute;
top: 90px;
left: 0;
background-color: white;
z-index: 9999;
max-height: 30rem;
overflow-y: scroll;
}
.searchBox, .languageBox{
padding-left: 20px;
height: 56px;
line-height: 56px;
}
.modelBox{
position: relative;
padding-bottom: 20px;
.search-wrap{
top: 0;
}
}
@media (max-width: 1660px) { @media (max-width: 1660px) {
.header { .header {
.logo { .logo {
@ -175,4 +237,24 @@ $height: 90px;
} }
} }
} }
@media (min-width: 280px) and (max-width: 750px) {
.contentBox{
.searchBox, .languageBox{
padding-left: 20px;
height: 40px;
line-height: 40px;
}
}
.search-wrap {
right: 10px;
top: 0;
width: 70%;
input {
width: 15rem;
padding: 0 .5rem 0 .1rem;
}
}
}
</style> </style>

@ -1,13 +1,6 @@
<template> <template>
<div> <div>
<el-menu :class="['nav', {home: isHome}]" ref="elMenu" <el-menu :class="['nav', {home: isHome}]" ref="elMenu" :key="menuRefresh" :mode="$store.getters.getModelType ? 'horizontal' : 'vertical' " :background-color="bgColor" :text-color="textColor" :active-text-color="activeTextColor" @open="jump" @select="jump" :default-active="String(active)">
:mode="$store.getters.getModelType ? 'horizontal' : 'vertical' "
:key="menuRefresh"
mode="horizontal"
:background-color="bgColor"
:text-color="textColor"
:active-text-color="activeTextColor"
@open="jump" @select="jump" :default-active="String(active)">
<menuTree :menuList="menus"/> <menuTree :menuList="menus"/>
</el-menu> </el-menu>
</div> </div>
@ -18,7 +11,7 @@ import menuTree from '@/components/menuTree'
import mixins from '@/mixins/article' import mixins from '@/mixins/article'
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
export default { export default {
props: ['isHome'], props: ['isHome','updateModelType'],
mixins: [mixins], mixins: [mixins],
data() { data() {
return { return {
@ -108,8 +101,12 @@ export default {
}, },
// //
jump(id) { jump(id) {
this.getPath(this.menus ,id || this.menus[0].id) this.getPath(this.menus ,id || this.menus[0].id)
this.columnTo(this.toItem) this.columnTo(this.toItem)
// if(!this.$store.getters.getModelType) {
// this.updateModelType(false)
// }
this.$parent.showSearch = false this.$parent.showSearch = false
} }
} }
@ -129,7 +126,7 @@ $height: 90px;
height: $height; height: $height;
line-height: $height; line-height: $height;
span { span {
font-size: 14px; font-size: 1rem;
font-weight: 600; font-weight: 600;
} }
&:hover { &:hover {
@ -182,4 +179,5 @@ $height: 90px;
} }
} }
} }
</style> </style>

@ -1,6 +1,6 @@
<template> <template>
<div class="wrap" v-if="modules.length>=1"> <div class="wrap" v-if="modules.length>=1">
<el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> <el-carousel height="30rem" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)"> <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
@ -13,7 +13,7 @@
<div class="block history gray"> <div class="block history gray">
<div :class="['inner', {'cursor-pointer': isLink(modules[1].form.link.linkName)}]" @click="openLink(modules[1].form)"> <div :class="['inner', {'cursor-pointer': isLink(modules[1].form.link.linkName)}]" @click="openLink(modules[1].form)">
<h2 class="wow fadeInLeft" style="margin-left: 57px">{{ modules[1].form.title }}</h2> <h2 class="wow fadeInLeft" style="margin-left: 3.56rem">{{ modules[1].form.title }}</h2>
<div class="texts wow fadeInDown" data-wow-delay="0.5s"> <div class="texts wow fadeInDown" data-wow-delay="0.5s">
<div class="left"> <div class="left">
<h2>{{ modules[1].form.subTitle }}</h2> <h2>{{ modules[1].form.subTitle }}</h2>
@ -193,7 +193,7 @@ export default {
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.history { .history {
h2 { h2 {
font-size: 30px; font-size: 2.14rem;
color: #333; color: #333;
} }
.texts { .texts {
@ -218,7 +218,7 @@ export default {
background: #D7D7D7; background: #D7D7D7;
} }
.des { .des {
font-size: 22px; font-size: 1.57rem;
color: #181818; color: #181818;
line-height: 31px; line-height: 31px;
-webkit-line-clamp: 6; -webkit-line-clamp: 6;
@ -259,11 +259,11 @@ export default {
} }
h6 { h6 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 40px; font-size: 2.85rem;
font-family: toppan; font-family: toppan;
} }
.des { .des {
font-size: 18px; font-size: 1.28rem;
} }
} }
.plan { .plan {
@ -293,11 +293,11 @@ export default {
} }
} }
h6 { h6 {
font-size: 36px; font-size: 2.57rem;
} }
.des { .des {
margin: 20px 0; margin: 20px 0;
font-size: 20px; font-size: 1.428rem;
} }
} }
.people { .people {
@ -323,14 +323,14 @@ export default {
} }
h6 { h6 {
margin: 20px 0; margin: 20px 0;
font-size: 40px; font-size: 2.85rem;
} }
.sub { .sub {
font-size: 20px; font-size: 1.428rem;
color: #020202; color: #020202;
} }
.des { .des {
font-size: 18px; font-size: 1.28rem;
color: #020202; color: #020202;
line-height: 30px; line-height: 30px;
} }
@ -368,12 +368,12 @@ export default {
} }
h6 { h6 {
margin: 35px 0 5px; margin: 35px 0 5px;
font-size: 24px; font-size: 1.71rem;
color: #272727; color: #272727;
transition: .3s; transition: .3s;
} }
.des { .des {
font-size: 16px; font-size: 1.14rem;
color: #757575; color: #757575;
transition: .3s; transition: .3s;
} }
@ -399,13 +399,13 @@ export default {
} }
h6 { h6 {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 30px; font-size: 2.14rem;
color: #333; color: #333;
transition: .3s; transition: .3s;
@include mul-ellipsis(3); @include mul-ellipsis(3);
} }
.des { .des {
font-size: 20px; font-size: 1.42rem;
color: #333; color: #333;
line-height: 34px; line-height: 34px;
transition: .3s; transition: .3s;
@ -426,14 +426,14 @@ export default {
} }
.num { .num {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 60px; font-size: 4.28rem;
font-weight: 800; font-weight: 800;
font-family: toppan; font-family: toppan;
color: #035CE1; color: #035CE1;
line-height: 49px; line-height: 49px;
} }
.text { .text {
font-size: 24px; font-size: 1.71rem;
} }
} }
@media (max-width: 1590px) { @media (max-width: 1590px) {
@ -448,12 +448,20 @@ export default {
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.card li {
padding:3.5rem 1rem;
}
.history{
.texts{
padding: 3.14rem 1.5rem;
}
}
.texts { .texts {
flex-direction: column; flex-direction: column;
.left{ .left{
width: 100%; width: 100%;
h2{ h2{
font-size: 20px; font-size: 1.42rem;
} }
} }
@ -531,10 +539,10 @@ export default {
.left{ .left{
width: 100%; width: 100%;
h6 { h6 {
font-size: 20px; font-size: 1.42rem;
} }
.des{ .des{
font-size: 15px; font-size: 1.07rem;
} }
} }
.pic { .pic {
@ -551,6 +559,7 @@ export default {
.texts { .texts {
.bg { .bg {
height: 350px; height: 350px;
margin-top: 1rem;
} }
} }
.card { .card {

@ -176,6 +176,9 @@ export default {
@import "./editor.css"; @import "./editor.css";
.content { .content {
width: 1400px; width: 1400px;
/deep/ .el-breadcrumb {
font-size: 1rem;
}
} }
.banner { .banner {
height: 280px; height: 280px;
@ -192,12 +195,12 @@ export default {
width: 66%; width: 66%;
} }
h2 { h2 {
font-size: 36px; font-size: 2.57rem;
color: #1C1C1C; color: #1C1C1C;
} }
.meta { .meta {
margin: 20px 0; margin: 20px 0;
font-size: 14px; font-size: 1rem;
color: #9B9B9B; color: #9B9B9B;
} }
.brief { .brief {
@ -241,6 +244,9 @@ export default {
} }
.right { .right {
width: 20%; width: 20%;
/deep/ .el-tree-node__label{
font-size: 1rem;
}
} }
.column { .column {
width: 100%; width: 100%;
@ -290,7 +296,7 @@ export default {
position: fixed; position: fixed;
right: 10px; right: 10px;
top: 160px; top: 160px;
z-index: 99;; z-index: 9;;
width: 180px; width: 180px;
} }
} }

@ -475,6 +475,7 @@ export default {
} }
.l-title { .l-title {
font-weight: 600; font-weight: 600;
font-size: 1.28rem;
} }
.banner { .banner {
@ -490,14 +491,14 @@ export default {
} }
.text { .text {
font-size: 48px; font-size: 3.42rem;
font-weight: 600; font-weight: 600;
@include ellipsis; @include ellipsis;
} }
.sub { .sub {
margin-top: 10px; margin-top: 10px;
font-size: 28px; font-size: 2rem;
} }
} }
@ -532,7 +533,7 @@ export default {
padding: 0 15px; padding: 0 15px;
margin-right: 10px; margin-right: 10px;
line-height: 36px; line-height: 36px;
font-size: 14px; font-size: 1rem;
color: #333; color: #333;
background: #f7f7f7; background: #f7f7f7;
cursor: pointer; cursor: pointer;
@ -558,7 +559,7 @@ export default {
} }
.label { .label {
font-size: 16px; font-size: 1.14rem;
color: #333; color: #333;
white-space: nowrap; white-space: nowrap;
} }
@ -579,7 +580,7 @@ export default {
width: 100%; width: 100%;
height: 48px; height: 48px;
padding: 0 15px; padding: 0 15px;
font-size: 14px; font-size: 1rem;
color: #333; color: #333;
background: #f7f7f7; background: #f7f7f7;
border: 0; border: 0;
@ -633,7 +634,7 @@ export default {
height: 48px; height: 48px;
padding-left: 40px; padding-left: 40px;
margin-bottom: 1px; margin-bottom: 1px;
font-size: 18px; font-size: 1.28rem;
color: #666; color: #666;
background-color: #fff; background-color: #fff;
border-top: 1px solid #f8f9f9; border-top: 1px solid #f8f9f9;
@ -654,7 +655,7 @@ export default {
} }
.el-tree-node__label { .el-tree-node__label {
font-size: 18px; font-size: 1.28rem;
color: #666; color: #666;
line-height: 22px; line-height: 22px;
} }
@ -709,13 +710,13 @@ export default {
.type { .type {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 18px; font-size: 1.28rem;
color: #333; color: #333;
} }
h6 { h6 {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 24px; font-size: 1.71rem;
color: #000; color: #000;
line-height: 38px; line-height: 38px;
@include mul-ellipsis(2); @include mul-ellipsis(2);
@ -724,7 +725,7 @@ export default {
.meta { .meta {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 1rem;
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
color: #333; color: #333;
} }
@ -776,7 +777,7 @@ export default {
.text { .text {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 14px; font-size: 1rem;
cursor: pointer; cursor: pointer;
@include ellipsis; @include ellipsis;
@ -786,7 +787,7 @@ export default {
} }
.date { .date {
font-size: 12px; font-size: .85rem;
color: #999; color: #999;
} }
} }

@ -207,11 +207,11 @@ export default {
} }
h6 { h6 {
margin-bottom: 25px; margin-bottom: 25px;
font-size: 24px; font-size: 1.71rem;
color: #333; color: #333;
} }
.des { .des {
font-size: 18px; font-size: 1.28rem;
color: #222; color: #222;
line-height: 30px; line-height: 30px;
} }
@ -248,18 +248,23 @@ export default {
margin-left: 20px; margin-left: 20px;
} }
h6 { h6 {
font-size: 18px; font-size: 1.28rem;
color: #0648A8; color: #0648A8;
@include ellipsis; @include ellipsis;
} }
.des { .des {
margin: 14px 0; margin: 14px 0;
font-size: 16px; font-size: 1.14rem;
color: #333; color: #333;
line-height: 22px; line-height: 22px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
} }
.meta { .meta {
font-size: 16px; font-size: 1.14rem;
color: #999; color: #999;
} }
} }
@ -292,11 +297,11 @@ export default {
transition: .3s; transition: .3s;
} }
h6 { h6 {
font-size: 40px; font-size: 2.75rem;
} }
.des { .des {
margin: 20px 0 10px; margin: 20px 0 10px;
font-size: 18px; font-size: 1.28rem;
color: #020202; color: #020202;
line-height: 30px; line-height: 30px;
} }
@ -326,13 +331,13 @@ export default {
.num { .num {
margin-bottom: 10px; margin-bottom: 10px;
font-family: toppan; font-family: toppan;
font-size: 60px; font-size: 4.28rem;
font-weight: 800; font-weight: 800;
color: #035CE1; color: #035CE1;
line-height: 49px; line-height: 49px;
} }
.text { .text {
font-size: 24px; font-size: 1.71rem;
} }
} }
.about { .about {
@ -352,14 +357,14 @@ export default {
} }
} }
.text { .text {
font-size: 30px; font-size: 2.14rem;
color: #fff; color: #fff;
} }
.des { .des {
display: block; display: block;
padding: 38px 60px; padding: 38px 60px;
margin-top: 84px; margin-top: 84px;
font-size: 30px; font-size: 2rem;
color: #fff; color: #fff;
line-height: 42px; line-height: 42px;
text-align: center; text-align: center;

@ -86,6 +86,9 @@ export default {
width: 1000px; width: 1000px;
padding: 77px 0; padding: 77px 0;
margin: 0 auto; margin: 0 auto;
span {
font-size: 1.35rem;
}
} }
.video { .video {
width: 100%; width: 100%;
@ -109,6 +112,9 @@ export default {
} }
.tab-content{ .tab-content{
width: 90%; width: 90%;
span {
font-size: 1.35rem;
}
} }
} }

@ -92,6 +92,9 @@ export default {
width: 1000px; width: 1000px;
padding: 77px 0; padding: 77px 0;
margin: 0 auto; margin: 0 auto;
span {
font-size: 1.35rem;
}
} }
.video { .video {
width: 100%; width: 100%;

@ -1022,7 +1022,7 @@ export default {
} }
} }
.tools { .tools {
z-index: 10; z-index: 9;
position: fixed; position: fixed;
top: 200px; top: 200px;
left: 0; left: 0;

@ -251,4 +251,40 @@ export default {
line-height: 30px; line-height: 30px;
} }
} }
@media (min-width: 280px) and (max-width: 750px) {
.single-banner{
.texts {
left: 200px;
.banner-title{
font-size: 2.2rem;
}
}
}
.block {
padding: 30px 0;
.inner{
.item {
flex-direction: column;
padding: 1.5rem;
}
.texts{
width: 100%;
padding: 1.5rem;
}
}
}
.style {
/deep/ .el-carousel__container{
height: 27rem !important;
}
.wow {
margin-bottom: 2rem;
}
.item{
height: 25rem;
}
}
}
</style> </style>

@ -4,7 +4,8 @@
const isDev = process.env.NODE_ENV === 'development' // 开发环境 const isDev = process.env.NODE_ENV === 'development' // 开发环境
let host = `${location.origin}/` let host = `${location.origin}/`
if (isDev) { if (isDev) {
host = 'http://192.168.31.151:10000/' host = 'http://192.168.31.51:10000/'
// host = 'http://192.168.31.136:10000/'
} }
const Setting = { const Setting = {

Loading…
Cancel
Save