|
|
|
@ -13,10 +13,19 @@ |
|
|
|
|
:src="item.pic" |
|
|
|
|
alt="" |
|
|
|
|
@click="openLink(item)"> |
|
|
|
|
<div class="text-wrap"> |
|
|
|
|
<div v-if="!i" |
|
|
|
|
class="qrcode-wrap"> |
|
|
|
|
<img class="qrcode" |
|
|
|
|
src="https://www.occupationlab.com/images/mini-program.jpg" |
|
|
|
|
alt=""> |
|
|
|
|
<p class="text">扫小程序下单</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<h6>{{ item.title }}</h6> |
|
|
|
|
<p class="sub">{{ item.des }}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
</template> |
|
|
|
|
</el-carousel> |
|
|
|
@ -42,12 +51,14 @@ |
|
|
|
|
<div class="inner-wrap"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="type-wrap"> |
|
|
|
|
<div class="tab-wrap"> |
|
|
|
|
<div> |
|
|
|
|
<img src="@/assets/images/hot.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img class="m-l-5 m-r-10" |
|
|
|
|
src="@/assets/images/type.png" |
|
|
|
|
alt=""> |
|
|
|
|
</div> |
|
|
|
|
<ul class="tab"> |
|
|
|
|
<li v-for="(tab, i) in tabs" |
|
|
|
|
:key="i" |
|
|
|
@ -337,7 +348,7 @@ export default { |
|
|
|
|
// 获取banner |
|
|
|
|
getBanner () { |
|
|
|
|
// 预览/详情 |
|
|
|
|
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => { |
|
|
|
|
this.id && this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => { |
|
|
|
|
if (data.length) { |
|
|
|
|
// state:已发布(1)则取theEditedJson,草稿(0)则取jsonBeforeEditing |
|
|
|
|
const json = JSON.parse(this.preview ? |
|
|
|
@ -568,10 +579,12 @@ export default { |
|
|
|
|
/deep/.el-carousel__container { |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
.texts { |
|
|
|
|
.text-wrap { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 50%; |
|
|
|
|
left: 188px; |
|
|
|
|
top: 55%; |
|
|
|
|
left: 12%; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
color: #fff; |
|
|
|
|
transform: translateY(-50%); |
|
|
|
|
} |
|
|
|
@ -582,6 +595,23 @@ export default { |
|
|
|
|
.sub { |
|
|
|
|
font-size: 24px; |
|
|
|
|
} |
|
|
|
|
.qrcode-wrap { |
|
|
|
|
display: inline-block; |
|
|
|
|
padding: 5px; |
|
|
|
|
margin-right: 50px; |
|
|
|
|
text-align: center; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 12px; |
|
|
|
|
.text { |
|
|
|
|
margin-top: 5px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #979797; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.qrcode { |
|
|
|
|
width: 120px; |
|
|
|
|
height: 120px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.intro { |
|
|
|
@ -641,14 +671,21 @@ export default { |
|
|
|
|
.left { |
|
|
|
|
display: inline-flex; |
|
|
|
|
} |
|
|
|
|
.tab-wrap { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
.tab { |
|
|
|
|
display: inline-flex; |
|
|
|
|
li { |
|
|
|
|
position: relative; |
|
|
|
|
margin: 0 20px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
|
font-weight: 600; |
|
|
|
|
line-height: 25px; |
|
|
|
|
color: #0b1d30; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:after { |
|
|
|
|
content: ''; |
|
|
|
@ -699,6 +736,7 @@ export default { |
|
|
|
|
margin-right: 30px; |
|
|
|
|
color: #666; |
|
|
|
|
font-size: 14px; |
|
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
|
font-weight: 600; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
@ -706,6 +744,7 @@ export default { |
|
|
|
|
padding: 5px 15px; |
|
|
|
|
color: #333; |
|
|
|
|
font-size: 14px; |
|
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&.active { |
|
|
|
@ -837,6 +876,7 @@ export default { |
|
|
|
|
min-height: 34px; |
|
|
|
|
color: #757f92; |
|
|
|
|
font-size: 12px; |
|
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
|
display: -webkit-box; |
|
|
|
|
-webkit-box-orient: vertical; |
|
|
|
|
-webkit-line-clamp: 2; |
|
|
|
@ -849,6 +889,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
.tag { |
|
|
|
|
margin-right: 8px; |
|
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
|
color: #1583ff; |
|
|
|
|
background-color: #f9f9f9; |
|
|
|
|
border: 0; |
|
|
|
@ -874,6 +915,7 @@ export default { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
color: #b5bfd5; |
|
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
|
font-size: 12px; |
|
|
|
|
.icon { |
|
|
|
|
width: 14px; |
|
|
|
@ -891,14 +933,65 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@media (max-width: 1500px) { |
|
|
|
|
@media (max-width: 1200px) { |
|
|
|
|
.wrap { |
|
|
|
|
.banner-item { |
|
|
|
|
h6 { |
|
|
|
|
font-size: 35px; |
|
|
|
|
.carousel { |
|
|
|
|
.texts { |
|
|
|
|
left: 50px; |
|
|
|
|
} |
|
|
|
|
.sub { |
|
|
|
|
font-size: 18px; |
|
|
|
|
} |
|
|
|
|
.inner { |
|
|
|
|
width: 90%; |
|
|
|
|
} |
|
|
|
|
.type-wrap { |
|
|
|
|
flex-direction: column; |
|
|
|
|
} |
|
|
|
|
.search { |
|
|
|
|
margin-top: 20px; |
|
|
|
|
} |
|
|
|
|
.filter { |
|
|
|
|
.vals { |
|
|
|
|
width: calc(100% - 100px); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@media (max-width: 1000px) { |
|
|
|
|
.wrap { |
|
|
|
|
.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 { |
|
|
|
|
.courses { |
|
|
|
|
li { |
|
|
|
|
width: 100%; |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|