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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      public/index.html
  2. 80
      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="description" content="一站式数字经济实训软件采购商城" />
<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" /> -->
<script>
var _hmt = _hmt || [];

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

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

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

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

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

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

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

@ -8,11 +8,13 @@
<template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable"
: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%"
:src="item.pic"
alt=""
@click="openLink(item)">
@click="openLink(item)"> -->
<div class="text-wrap">
<div v-if="!i"
class="qrcode-wrap">
@ -517,8 +519,13 @@ export default {
<style lang="scss" scoped>
.wrap {
min-width: 1150px;
.carousel {
.pic {
height: 100%;
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
img {
height: 100%;
}
@ -898,120 +905,112 @@ export default {
}
}
}
@media (max-width: 1150px) {
@media (max-width: 1200px) {
.wrap {
min-width: 980px;
.carousel {
.text-wrap {
left: 40px;
}
.qrcode-wrap {
margin-right: 20px;
}
}
.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>

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

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

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

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

Write Preview
Loading…
Cancel
Save