huoran
/
FE_huoran_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

还原自适应

Browse Source
master
yujialong 1 year ago
parent 3bba31dddd
commit 0d667642d6
7 changed files with 314 additions and 321 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      public/index.html
  2. 106
      src/layouts/header/index.vue
  3. 3
      src/layouts/home/index.vue
  4. 18
      src/layouts/navbar/index.vue
  5. 227
      src/pages/index/list/index.vue
  6. 105
      src/pages/member/index.vue
  7. 174
      src/styles/page/page.scss

2
public/index.html
Unescape View File

@ -6,7 +6,7 @@
<meta name="keywords" content="职站商城,深圳或然科技,或然科技,教育产业互联网,金融科技,实训软件,虚拟仿真,数字经济,国泰安" /> <meta name="keywords" content="职站商城,深圳或然科技,或然科技,教育产业互联网,金融科技,实训软件,虚拟仿真,数字经济,国泰安" />
<meta name="description" content="一站式数字经济实训软件采购商城" /> <meta name="description" content="一站式数字经济实训软件采购商城" />
<meta name="baidu-site-verification" content="code-TRfXe8xIkJ" /> <meta name="baidu-site-verification" content="code-TRfXe8xIkJ" />
<!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- <meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" /> --> <!-- <meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" /> -->
<script> <script>
var _hmt = _hmt || []; var _hmt = _hmt || [];

106
src/layouts/header/index.vue
Unescape View File

@ -6,24 +6,24 @@
alt=""> alt="">
</a> </a>
<!-- pc端 --> <!-- pc端 -->
<!-- <template v-if="$store.getters.getModelType"> --> <template v-if="$store.getters.getModelType">
<navbar v-if="navShow" <navbar v-if="navShow"
ref="nav" ref="nav"
:isHome.sync="isHome" :isHome.sync="isHome"
:isEstate.sync="isEstate" :isEstate.sync="isEstate"
:isIasf.sync="isIasf" :isIasf.sync="isIasf"
@showMoreBtns="updateBtnsType"></navbar> @showMoreBtns="updateBtnsType"></navbar>
<div class="tools"> <div class="tools">
<div class="login" <div class="login"
@click="qrcodeVisible = true"> @click="qrcodeVisible = true">
<img src="@/assets/images/user.png" <img src="@/assets/images/user.png"
alt=""> alt="">
<span>注册登录</span> <span>注册登录</span>
</div>
</div> </div>
</div> </template>
<!-- </template> -->
<!-- 手机端 --> <!-- 手机端 -->
<!-- <template v-else> <template v-else>
<i class="rightBox" <i class="rightBox"
:class="modelType ? 'el-icon-s-fold': 'el-icon-s-unfold' " :class="modelType ? 'el-icon-s-fold': 'el-icon-s-unfold' "
@click="updateModelType"></i> @click="updateModelType"></i>
@ -34,7 +34,7 @@
:updateModelType="updateType"></navbar> :updateModelType="updateType"></navbar>
</div> </div>
</template> --> </template>
<el-dialog title="" <el-dialog title=""
:visible.sync="qrcodeVisible" :visible.sync="qrcodeVisible"
@ -298,41 +298,41 @@ $height: 90px;
color: #fff; color: #fff;
} }
} }
// @media (max-width: 1660px) { @media (max-width: 1660px) {
// .header { .header {
// .logo { .logo {
// left: 10px; left: 10px;
// } }
// .search { .search {
// margin-right: 20px !important; margin-right: 20px !important;
// } }
// .tools { .tools {
// right: 30px; right: 30px;
// } }
// } }
// } }
// @media (max-width: 1200px) { @media (max-width: 1200px) {
// .header { .header {
// color: black !important; color: black !important;
// background-color: #fff; background-color: #fff;
// } }
// .contentBox { .contentBox {
// .searchBox, .searchBox,
// .languageBox { .languageBox {
// padding-left: 20px; padding-left: 20px;
// height: 40px; height: 40px;
// line-height: 40px; line-height: 40px;
// } }
// } }
// .search-wrap { .search-wrap {
// right: 10px; right: 10px;
// top: 0; top: 0;
// width: 70%; width: 70%;
// input { input {
// width: 15rem; width: 15rem;
// padding: 0 0.5rem 0 0.1rem; padding: 0 0.5rem 0 0.1rem;
// } }
// } }
// } }
</style> </style>

3
src/layouts/home/index.vue
Unescape View File

@ -76,9 +76,6 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main {
min-width: 1050px;
}
.main:not(.channel) { .main:not(.channel) {
min-height: calc(100% - 90px); min-height: calc(100% - 90px);
.layout { .layout {

18
src/layouts/navbar/index.vue
Unescape View File

@ -3,7 +3,7 @@
<el-menu :class="['nav', {home: isHome, estate: isEstate,changing: !showMenu}]" <el-menu :class="['nav', {home: isHome, estate: isEstate,changing: !showMenu}]"
ref="elMenu" ref="elMenu"
:key="menuRefresh" :key="menuRefresh"
mode="horizontal" :mode="$store.getters.getModelType ? 'horizontal' : 'vertical' "
:background-color="bgColor" :background-color="bgColor"
:text-color="textColor" :text-color="textColor"
:active-text-color="activeTextColor" :active-text-color="activeTextColor"
@ -236,12 +236,12 @@ $height: 90px;
} }
} }
} }
// @media (max-width: 1200px) { @media (max-width: 1200px) {
// /deep/.nav { /deep/.nav {
// .el-menu-item { .el-menu-item {
// padding: 0 8px; padding: 0 8px;
// color: black !important; color: black !important;
// } }
// } }
// } }
</style> </style>

227
src/pages/index/list/index.vue
Unescape View File

@ -8,11 +8,13 @@
<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" <el-carousel-item v-if="item.pic && item.isEnable"
:key="i"> :key="i">
<img :class="[{'cursor-pointer': isLink(item.link.linkName)}]" <div class="pic"
:style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
<!-- <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
width="100%" width="100%"
:src="item.pic" :src="item.pic"
alt="" alt=""
@click="openLink(item)"> @click="openLink(item)"> -->
<div class="text-wrap"> <div class="text-wrap">
<div v-if="!i" <div v-if="!i"
class="qrcode-wrap"> class="qrcode-wrap">
@ -517,8 +519,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
min-width: 1150px;
.carousel { .carousel {
.pic {
height: 100%;
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
img { img {
height: 100%; height: 100%;
} }
@ -898,120 +905,112 @@ export default {
} }
} }
} }
@media (max-width: 1150px) { @media (max-width: 1200px) {
.wrap { .wrap {
min-width: 980px; .carousel {
.text-wrap {
left: 40px;
}
.qrcode-wrap {
margin-right: 20px;
}
}
.inner { .inner {
width: 98%; width: 90%;
}
.type-wrap {
flex-direction: column;
}
.search {
margin-top: 20px;
}
.filter {
.vals {
width: calc(100% - 100px);
}
}
}
}
@media (max-width: 1000px) {
.wrap {
.carousel {
.text-wrap {
top: 47%;
flex-direction: column;
align-items: flex-start;
}
.qrcode-wrap {
margin: 0 0 20px 0;
}
h6 {
font-size: 1.8rem;
}
.sub {
font-size: 1.3rem;
}
}
.intro {
flex-direction: column;
justify-content: center;
align-items: flex-start;
li {
flex: 1;
margin-bottom: 20px;
}
}
.type-wrap {
.tab-wrap {
flex-direction: column;
align-items: flex-start;
}
.tab {
margin-top: 10px;
}
}
.courses {
li {
width: calc((100% - 22px) / 2);
&:nth-child(2n) {
margin-right: 0;
}
}
}
}
}
@media (max-width: 640px) {
.wrap {
.carousel {
.text-wrap {
top: 47%;
}
.qrcode {
width: 80px;
height: 80px;
}
h6 {
font-size: 1.4rem;
}
.sub {
font-size: 1rem;
}
}
.type-wrap {
.tab {
flex-wrap: wrap;
li {
margin-bottom: 20px;
}
}
}
.search {
margin-top: 0;
}
.courses {
li {
width: 100%;
margin-right: 0;
}
} }
} }
} }
// @media (max-width: 1200px) {
// .wrap {
// .carousel {
// .text-wrap {
// left: 40px;
// }
// .qrcode-wrap {
// margin-right: 20px;
// }
// }
// .inner {
// width: 90%;
// }
// .type-wrap {
// flex-direction: column;
// }
// .search {
// margin-top: 20px;
// }
// .filter {
// .vals {
// width: calc(100% - 100px);
// }
// }
// }
// }
// @media (max-width: 1000px) {
// .wrap {
// .carousel {
// .text-wrap {
// top: 47%;
// flex-direction: column;
// align-items: flex-start;
// }
// .qrcode-wrap {
// margin: 0 0 20px 0;
// }
// h6 {
// font-size: 1.8rem;
// }
// .sub {
// font-size: 1.3rem;
// }
// }
// .intro {
// flex-direction: column;
// justify-content: center;
// align-items: flex-start;
// li {
// flex: 1;
// margin-bottom: 20px;
// }
// }
// .type-wrap {
// .tab-wrap {
// flex-direction: column;
// align-items: flex-start;
// }
// .tab {
// margin-top: 10px;
// }
// }
// .courses {
// li {
// width: calc((100% - 22px) / 2);
// &:nth-child(2n) {
// margin-right: 0;
// }
// }
// }
// }
// }
// @media (max-width: 640px) {
// .wrap {
// .carousel {
// .text-wrap {
// top: 47%;
// }
// .qrcode {
// width: 80px;
// height: 80px;
// }
// h6 {
// font-size: 1.4rem;
// }
// .sub {
// font-size: 1rem;
// }
// }
// .type-wrap {
// .tab {
// flex-wrap: wrap;
// li {
// margin-bottom: 20px;
// }
// }
// }
// .search {
// margin-top: 0;
// }
// .courses {
// li {
// width: 100%;
// margin-right: 0;
// }
// }
// }
// }
</style> </style>

105
src/pages/member/index.vue
Unescape View File

@ -1,7 +1,6 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="reg"> <div class="reg">
{{ width }}
<div class="equity-wrap"> <div class="equity-wrap">
<div class="equity"> <div class="equity">
<h6> <h6>
@ -54,12 +53,10 @@ export default {
data () { data () {
return { return {
qrcodeVisible: false, qrcodeVisible: false,
qrcodeTop: '100px', qrcodeTop: '100px'
width: 0
} }
}, },
mounted () { mounted () {
this.width = window.innerWidth
const height = (window.innerHeight - 758) / 2 const height = (window.innerHeight - 758) / 2
this.qrcodeTop = (height > 0 ? height : 0) + 'px' this.qrcodeTop = (height > 0 ? height : 0) + 'px'
new WOW().init() new WOW().init()
@ -200,54 +197,54 @@ export default {
color: #fff; color: #fff;
} }
} }
// @media (max-width: 1200px) { @media (max-width: 1200px) {
// .reg { .reg {
// h6 { h6 {
// margin: 20px 0; margin: 20px 0;
// } }
// .equity-wrap { .equity-wrap {
// width: 90%; width: 90%;
// .equity { .equity {
// padding: 0 20px; padding: 0 20px;
// } }
// } }
// .step { .step {
// flex-wrap: wrap; flex-wrap: wrap;
// padding: 0 30px 0 50px; padding: 0 30px 0 50px;
// li { li {
// width: 50%; width: 50%;
// padding: 0; padding: 0;
// &:first-child, &:first-child,
// &:nth-child(2) { &:nth-child(2) {
// margin-bottom: 10px; margin-bottom: 10px;
// } }
// } }
// } }
// .member-des { .member-des {
// margin-top: 20px; margin-top: 20px;
// } }
// .param { .param {
// padding: 0; padding: 0;
// li { li {
// width: 50%; width: 50%;
// } }
// } }
// } }
// } }
// @media (max-width: 640px) { @media (max-width: 640px) {
// .reg { .reg {
// .step { .step {
// li { li {
// width: 100%; width: 100%;
// margin-bottom: 10px; margin-bottom: 10px;
// &:last-child { &:last-child {
// margin-bottom: 0; margin-bottom: 0;
// } }
// } }
// } }
// .btn { .btn {
// width: 100%; width: 100%;
// } }
// } }
// } }
</style> </style>

174
src/styles/page/page.scss
Unescape View File

@ -131,91 +131,91 @@
} }
} }
// @media (max-width: 1200px) { @media (max-width: 1200px) {
// .wrap { .wrap {
// .single-banner { .single-banner {
// .banner-img { .banner-img {
// height: 35rem; height: 35rem;
// } }
// .texts { .texts {
// top: 20rem; top: 20rem;
// left: 9rem; left: 9rem;
// } }
// } }
// } }
// .inner { .inner {
// width: 95%; width: 95%;
// } }
// .tabs { .tabs {
// overflow: hidden; overflow: hidden;
// overflow-x: auto; overflow-x: auto;
// white-space: normal; white-space: normal;
// justify-content: normal; justify-content: normal;
// display: -webkit-box; display: -webkit-box;
// li { li {
// white-space: normal; white-space: normal;
// } }
// } }
// } }
// @media (max-width: 980px) { @media (max-width: 980px) {
// .wrap { .wrap {
// .single-banner { .single-banner {
// .banner-img { .banner-img {
// height: 25rem; height: 25rem;
// } }
// .texts { .texts {
// top: 15rem; top: 15rem;
// left: 5rem; left: 5rem;
// } }
// } }
// } }
// .block { .block {
// padding: 50px 0; padding: 50px 0;
// } }
// } }
// @media (max-width: 768px) { @media (max-width: 768px) {
// .wrap { .wrap {
// .single-banner { .single-banner {
// .banner-img { .banner-img {
// height: 22rem; height: 22rem;
// } }
// .texts { .texts {
// top: 12rem; top: 12rem;
// left: 5rem; left: 5rem;
// } }
// } }
// } }
// .tabs { .tabs {
// li { li {
// padding: 1rem 10px; padding: 1rem 10px;
// margin: 0; margin: 0;
// } }
// } }
// } }
// @media (max-width: 640px) { @media (max-width: 640px) {
// .wrap { .wrap {
// .single-banner { .single-banner {
// .banner-img { .banner-img {
// height: 18rem; height: 18rem;
// } }
// .texts { .texts {
// top: 10rem; top: 10rem;
// left: 5rem; left: 5rem;
// } }
// } }
// } }
// } }
// @media (max-width: 480px) { @media (max-width: 480px) {
// .wrap { .wrap {
// .single-banner { .single-banner {
// .banner-img { .banner-img {
// height: 15rem; height: 15rem;
// } }
// .texts { .texts {
// top: 6rem; top: 6rem;
// left: 5rem; left: 5rem;
// } }
// } }
// } }
// } }

Write Preview
Loading…
Cancel
Save