去掉自适应(暂时弃用,作备份)

master
yujialong 1 year ago
parent ae5ceff518
commit 3bba31dddd
  1. 7
      public/index.html
  2. BIN
      src/assets/images/mini-program-sm.jpg
  3. 80
      src/layouts/header/index.vue
  4. 3
      src/layouts/home/index.vue
  5. 18
      src/layouts/navbar/index.vue
  6. 6
      src/pages/aboutUs/index.vue
  7. 386
      src/pages/index/list/index.vue
  8. 105
      src/pages/index/show/index.vue
  9. 105
      src/pages/member/index.vue
  10. 174
      src/styles/page/page.scss

@ -3,10 +3,11 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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" /> -->
<script> <script>
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function () { (function () {

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

@ -6,7 +6,7 @@
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"
@ -21,9 +21,9 @@
<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>

@ -76,6 +76,9 @@ 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 {

@ -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="$store.getters.getModelType ? 'horizontal' : 'vertical' " mode="horizontal"
: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>

@ -237,6 +237,12 @@
alt=""> alt="">
<p class="text">扫一扫关注公众号</p> <p class="text">扫一扫关注公众号</p>
</div> </div>
<div class="qrcode m-l-30">
<img width="103"
src="@/assets/images/mini-program-sm.jpg"
alt="">
<p class="text">扫一扫登录职站商城</p>
</div>
</div> </div>
</div> </div>
</div> </div>

@ -76,30 +76,44 @@
</div> </div>
</div> </div>
<div class="filter"> <div class="filter">
<dl v-if="curTab == 1" <template v-if="curTab == 1">
style="align-items: center;"> <dl>
<dt>学科专业</dt> <dt>学科类别</dt>
<div class="vals"> <div class="vals">
<dd :class="{active: categoryId === ''}" <dd :class="{active: categoryId === ''}"
@click="catetoryClick('')">全部</dd> @click="categoryClick({id: ''}, 1)">全部</dd>
<dd :class="{active: categoryId === 1}" <dd :class="{active: categoryId === 1}"
style="margin-right: 20px" style="margin-right: 20px"
@click="catetoryClick(1)">不限</dd> @click="categoryClick({id: 1}, 1)">不限</dd>
<div v-for="(item, i) in category" <dd v-for="(item, i) in category"
:key="i" :key="i"
:class="['category-item', {active: item.disciplineId == categoryId}]"> :class="{active: categoryId === item.id}"
<span class="name" @click="categoryClick(item, 1)">{{ item.name }}</dd>
@click="nameClick(item, i)">{{ item.val.length ? item.name : item.categoryName }}</span>
<el-cascader :class="{active: item.disciplineId == categoryId}"
:ref="'category' + i"
v-model="item.val"
:options="item.list"
:props="{ checkStrictly: true }"
placeholder=""
@change="id => categoryChange(id, item, i)"></el-cascader>
</div> </div>
</dl>
<dl v-if="categoryId && categoryId !== 1">
<dt>专业类</dt>
<div class="vals">
<dd :class="{active: professionalCategoryId === ''}"
@click="categoryClick({id: ''}, 2)">全部</dd>
<dd v-for="(item, i) in professionalClasses"
:key="i"
:class="{active: professionalCategoryId === item.id}"
@click="categoryClick(item, 2)">{{ item.name }}</dd>
</div>
</dl>
<dl v-if="professionalCategoryId && professionalCategoryId !== 1">
<dt>专业</dt>
<div class="vals">
<dd :class="{active: professionalId === ''}"
@click="categoryClick({id: ''}, 3)">全部</dd>
<dd v-for="(item, i) in professionals"
:key="i"
:class="{active: professionalId === item.id}"
@click="categoryClick(item, 3)">{{ item.name }}</dd>
</div> </div>
</dl> </dl>
</template>
<dl v-if="curTab == 3"> <dl v-if="curTab == 3">
<dt>产品标签</dt> <dt>产品标签</dt>
<div class="vals"> <div class="vals">
@ -282,13 +296,9 @@ export default {
professionalCategoryId: '', professionalCategoryId: '',
professionalId: '', professionalId: '',
category: [], category: [],
professionalClasses: [],
professionals: [],
labels: [], labels: [],
subjectList: [], //
professionalClassList: [], //
professionalList: [], //
categoryName: '',
professionalCategoryName: '',
professionalName: '',
types: [], types: [],
classifications: [], classifications: [],
status: [ status: [
@ -411,6 +421,7 @@ export default {
this.$post(this.api.schemeList, { this.$post(this.api.schemeList, {
pageNum: 1, pageNum: 1,
pageSize: 10000, pageSize: 10000,
classificationId: this.form.productClassification,
querySource: 3, //(3. 4.) querySource: 3, //(3. 4.)
}).then(({ data }) => { }).then(({ data }) => {
this.schemes = data.records this.schemes = data.records
@ -420,109 +431,41 @@ export default {
async getSubject () { async getSubject () {
// //
this.$get(this.api.subjectCategoryCited).then(({ list }) => { this.$get(this.api.subjectCategoryCited).then(({ list }) => {
const result = []
const promises = []
list = list.filter(e => e.disciplineId != 1) list = list.filter(e => e.disciplineId != 1)
list.map((e, i) => { list.map((e, i) => {
e.id = e.disciplineId
e.name = e.disciplineName
// //
e.professionalClasses.map(e => { e.professionalClasses.map(e => {
e.value = e.professionalClassId e.id = e.professionalClassId
e.label = e.professionalClassName e.name = e.professionalClassName
// //
e.professionals.map(e => { e.professionals.map(e => {
e.value = e.professionalId e.id = e.professionalId
e.label = e.professionalName e.name = e.professionalName
}) })
e.children = e.professionals e.children = e.professionals
}) })
result.push({ e.children = e.professionalClasses
val: [],
disciplineId: e.disciplineId,
name: e.disciplineName,
categoryName: e.disciplineName,
list: e.professionalClasses
})
})
Promise.all(promises).then(_ => {
console.log("🚀 ~ file: index.vue:378 ~ this.$get ~ result:", result)
this.category = result
}) })
this.category = list
}).catch(err => { }) }).catch(err => { })
}, },
nameClick (item, i) { //
this.categoryId = item.disciplineId categoryClick (item, i) {
const { id, children } = item
this[i === 1 ? 'categoryId' : i === 2 ? 'professionalCategoryId' : 'professionalId'] = id
//
if (i === 1) {
this.professionalCategoryId = '' this.professionalCategoryId = ''
this.professionalId = '' this.professionalId = ''
this.$refs['category' + i][0].toggleDropDownVisible() if (children) this.professionalClasses = children
this.clearCategory() this.professionals = []
this.initData() } else if (i === 2) { //
}, this.professionalId = ''
// if (children) this.professionals = children
clearCategory () {
const list = this.category
list.map(e => {
e.val = []
})
},
categoryChange (val, item, i) {
const name = this.$refs['category' + i][0].getCheckedNodes()[0].pathLabels
console.log("🚀 ~ file: index.vue:431 ~ categoryChange ~ val, item:", val, item, name)
item.name = item.categoryName + '/' + name.join('/')
this.clearCategory()
item.val = val
this.categoryId = item.disciplineId
this.professionalCategoryId = val[0] || ''
this.professionalId = val[1] || ''
this.initData()
},
// name
handleCategoryName () {
if (this.subjectList.length) {
const id = this.categoryId
const list = this.subjectList
if (list.length) {
if (id === '' || id === 1) {
this.categoryName = list[0].disciplineName
} else {
const item = list.find(e => e.disciplineId == id)
this.categoryName = item ? item.disciplineName : ''
}
}
}
if (this.professionalClassList.length) {
const id = this.professionalCategoryId
const list = this.professionalClassList
if (list.length) {
if (id === '' || id === 1) {
this.professionalCategoryName = list[0].professionalClassName
} else {
const item = list.find(e => e.professionalClassId == id)
this.professionalCategoryName = item ? item.professionalClassName : ''
}
}
}
if (this.professionalList.length) {
const id = this.professionalId
const list = this.professionalList
if (list.length) {
if (id === '' || id === 1) {
this.professionalName = list[0].professionalName
} else {
const item = list.find(e => e.professionalId == id)
this.professionalName = item ? item.professionalName : ''
}
}
} }
},
//
catetoryClick (id) {
this.categoryId = id
this.professionalCategoryId = id
this.professionalId = id
this.clearCategory()
this.initData() this.initData()
}, },
// //
@ -549,6 +492,10 @@ export default {
// //
filterChange (id, prop) { filterChange (id, prop) {
this.form[prop] = id this.form[prop] = id
if (prop === 'productClassification') {
this.form.websiteMallId = ''
this.getSchemes()
}
this.initData() this.initData()
}, },
// //
@ -570,6 +517,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
min-width: 1150px;
.carousel { .carousel {
img { img {
height: 100%; height: 100%;
@ -950,112 +898,120 @@ export default {
} }
} }
} }
@media (max-width: 1200px) { @media (max-width: 1150px) {
.wrap { .wrap {
.carousel { min-width: 980px;
.text-wrap {
left: 40px;
}
.qrcode-wrap {
margin-right: 20px;
}
}
.inner { .inner {
width: 90%; width: 98%;
} }
.type-wrap { }
flex-direction: column; }
} // @media (max-width: 1200px) {
.search { // .wrap {
margin-top: 20px; // .carousel {
} // .text-wrap {
.filter { // left: 40px;
.vals { // }
width: calc(100% - 100px); // .qrcode-wrap {
} // margin-right: 20px;
} // }
} // }
} // .inner {
@media (max-width: 1000px) { // width: 90%;
.wrap { // }
.carousel { // .type-wrap {
.text-wrap { // flex-direction: column;
top: 47%; // }
flex-direction: column; // .search {
align-items: flex-start; // margin-top: 20px;
} // }
.qrcode-wrap { // .filter {
margin: 0 0 20px 0; // .vals {
} // width: calc(100% - 100px);
h6 { // }
font-size: 1.8rem; // }
} // }
.sub { // }
font-size: 1.3rem; // @media (max-width: 1000px) {
} // .wrap {
} // .carousel {
.intro { // .text-wrap {
flex-direction: column; // top: 47%;
justify-content: center; // flex-direction: column;
align-items: flex-start; // align-items: flex-start;
li { // }
flex: 1; // .qrcode-wrap {
margin-bottom: 20px; // margin: 0 0 20px 0;
} // }
} // h6 {
.type-wrap { // font-size: 1.8rem;
.tab-wrap { // }
flex-direction: column; // .sub {
align-items: flex-start; // font-size: 1.3rem;
} // }
.tab { // }
margin-top: 10px; // .intro {
} // flex-direction: column;
} // justify-content: center;
.courses { // align-items: flex-start;
li { // li {
width: calc((100% - 22px) / 2); // flex: 1;
&:nth-child(2n) { // margin-bottom: 20px;
margin-right: 0; // }
} // }
} // .type-wrap {
} // .tab-wrap {
} // flex-direction: column;
} // align-items: flex-start;
@media (max-width: 640px) { // }
.wrap { // .tab {
.carousel { // margin-top: 10px;
.text-wrap { // }
top: 47%; // }
} // .courses {
.qrcode { // li {
width: 80px; // width: calc((100% - 22px) / 2);
height: 80px; // &:nth-child(2n) {
} // margin-right: 0;
h6 { // }
font-size: 1.4rem; // }
} // }
.sub { // }
font-size: 1rem; // }
} // @media (max-width: 640px) {
} // .wrap {
.type-wrap { // .carousel {
.tab { // .text-wrap {
flex-wrap: wrap; // top: 47%;
li { // }
margin-bottom: 20px; // .qrcode {
} // width: 80px;
} // height: 80px;
} // }
.search { // h6 {
margin-top: 0; // font-size: 1.4rem;
} // }
.courses { // .sub {
li { // font-size: 1rem;
width: 100%; // }
margin-right: 0; // }
} // .type-wrap {
} // .tab {
} // flex-wrap: wrap;
} // li {
// margin-bottom: 20px;
// }
// }
// }
// .search {
// margin-top: 0;
// }
// .courses {
// li {
// width: 100%;
// margin-right: 0;
// }
// }
// }
// }
</style> </style>

@ -9,23 +9,19 @@
</el-card> </el-card>
<div class="inner"> <div class="inner">
<div class="top"> <div class="top">
<div class="pics" <el-carousel class="pics"
v-if="form.mall.coverDrawing"> :interval="6000"
<el-image :class="['cover', {full: !form.interfaceDiagrams}]" height="278px"
:src="form.mall.coverDrawing" :arrow="form.pics.length > 1 ? 'hover' : 'never'"
:preview-src-list="form.pics"> :indicator-position="form.pics.length > 1 ? '' : 'none'">
</el-image> <el-carousel-item v-for="(item, i) in form.pics"
<div v-if="form.interfaceDiagrams"
class="interface">
<div class="pic"
v-for="(pic, i) in form.interfaceDiagrams"
:key="i"> :key="i">
<el-image :src="pic" <el-image class="pic"
:src="item"
:preview-src-list="form.pics"> :preview-src-list="form.pics">
</el-image> </el-image>
</div> </el-carousel-item>
</div> </el-carousel>
</div>
<div class="right" <div class="right"
id="fields"> id="fields">
<h6>{{ form.mall.productName }}</h6> <h6>{{ form.mall.productName }}</h6>
@ -87,7 +83,8 @@
@click="showQrcode">会员价采购</button> @click="showQrcode">会员价采购</button>
</div> </div>
</div> </div>
<div class="course"> <div class="course"
id="part0">
<div class="detail"> <div class="detail">
<ul class="tab"> <ul class="tab">
<li v-for="(tab, i) in tabs" <li v-for="(tab, i) in tabs"
@ -96,12 +93,10 @@
@click="tabChange(tab)">{{ tab.name }}</li> @click="tabChange(tab)">{{ tab.name }}</li>
</ul> </ul>
<div class="courses"> <div class="courses">
<template v-if="!curTab">
<div class="des" <div class="des"
v-html="form.mall.detailedIntroduction"></div> v-html="form.mall.detailedIntroduction"></div>
</template>
<template v-else>
<div class="chapter" <div class="chapter"
id="part1"
v-for="(item, i) in chapterList" v-for="(item, i) in chapterList"
:key="i"> :key="i">
<div class="chapterName">{{ item.name }}</div> <div class="chapterName">{{ item.name }}</div>
@ -110,8 +105,7 @@
<div v-for="(section, j) in item.subsectionList" <div v-for="(section, j) in item.subsectionList"
:key="j"> :key="j">
<div class="sectionName" <div class="sectionName"
:title="section.name" :title="section.name">
:class="{active: curLink === `${item.name}${section.name}`}">
<div class="val"> <div class="val">
<img v-if="section.fileType === 'pptx'" <img v-if="section.fileType === 'pptx'"
src="@/assets/images/exts/ppt.png" src="@/assets/images/exts/ppt.png"
@ -137,7 +131,6 @@
</div> </div>
</div> </div>
</div> </div>
</template>
</div> </div>
</div> </div>
<div class="products"> <div class="products">
@ -197,15 +190,15 @@
</div> </div>
</el-dialog> </el-dialog>
<el-dialog title="温馨提示" <el-dialog title=""
:visible.sync="qrcodeVisible" :visible.sync="qrcodeVisible"
width="360px" width="500px"
center center
:close-on-click-modal="false"> :top="qrcodeTop"
<div class="buy"> custom-class="qrcode-dia">
<p class="tips">请用微信扫描下方小程序二维码<br>加入职站商城会员进行采购吧</p> <div>
<img width="70%" <img width="100%"
src="@/assets/images/product/qrcode.jpg" src="@/assets/images/occupationlab.png"
alt=""> alt="">
</div> </div>
</el-dialog> </el-dialog>
@ -227,6 +220,7 @@ export default {
}, },
], ],
form: { form: {
pics: [],
classificationIds: [], classificationIds: [],
mall: { mall: {
coverDrawing: '' coverDrawing: ''
@ -237,7 +231,8 @@ export default {
hots: [], hots: [],
linkVisible: false, linkVisible: false,
height: '', height: '',
qrcodeVisible: false qrcodeVisible: false,
qrcodeTop: '100px'
}; };
}, },
computed: { computed: {
@ -281,6 +276,8 @@ export default {
}, },
}, },
mounted () { mounted () {
const height = (window.innerHeight - 758) / 2
this.qrcodeTop = (height > 0 ? height : 0) + 'px'
this.getData() this.getData()
this.getHot() this.getHot()
}, },
@ -311,6 +308,9 @@ export default {
// tab // tab
tabChange ({ id }) { tabChange ({ id }) {
this.curTab = id this.curTab = id
document.querySelector(`#part${id}`).scrollIntoView({
behavior: 'smooth'
})
}, },
// //
toPreview (i, j) { toPreview (i, j) {
@ -396,33 +396,12 @@ export default {
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
.pics { .pics {
display: flex; width: 484px;
flex-wrap: wrap;
width: 502px;
margin-right: 20px; margin-right: 20px;
.cover {
width: 370px;
height: 278px;
margin-right: 10px;
border-radius: 8px;
overflow: hidden;
&.full {
width: 100%;
}
}
.pic { .pic {
width: 114px;
height: 86px;
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
.el-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} border-radius: 8px;
&:last-child {
margin-bottom: 0;
}
} }
} }
.right { .right {
@ -494,8 +473,12 @@ export default {
} }
} }
.tab { .tab {
display: inline-flex; z-index: 100;
margin-left: 10px; position: sticky;
top: 20px;
display: flex;
padding: 10px 10px 20px;
background-color: #fff;
li { li {
position: relative; position: relative;
margin-right: 20px; margin-right: 20px;
@ -525,11 +508,11 @@ export default {
padding: 20px 24px; padding: 20px 24px;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
overflow: hidden;
} }
} }
.courses { .courses {
margin-top: 40px; padding-top: 10px;
overflow: hidden;
/deep/.des { /deep/.des {
div, div,
p, p,
@ -543,6 +526,7 @@ export default {
overflow: auto; overflow: auto;
} }
.chapter { .chapter {
padding-top: 60px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.chapterName { .chapterName {
@ -694,4 +678,13 @@ export default {
width: 85%; width: 85%;
} }
} }
/deep/.qrcode-dia {
.el-dialog__header,
.el-dialog__body {
padding: 0;
}
.el-dialog__headerbtn .el-dialog__close {
color: #fff;
}
}
</style> </style>

@ -1,6 +1,7 @@
<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>
@ -53,10 +54,12 @@ 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()
@ -197,54 +200,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>

@ -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;
} // }
} // }
} // }
} // }

Loading…
Cancel
Save