cjy-Web
/
cjy_web
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初始化

Browse Source
main
han 9 months ago
parent 0cb8f605b3
commit 9abc2cbe6d
4 changed files with 113 additions and 42 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 35
      src/assets/styles/v-vision.scss
  2. 113
      src/views/pages/index.vue
  3. 5
      src/views/pages/news-list.vue
  4. 2
      src/views/pages/theme/about-us.vue

35
src/assets/styles/v-vision.scss
Unescape View File

@ -22,28 +22,37 @@ img {
.cjy-banner {
position: relative;
&:before{
content: "";
position: absolute;
width: 800px;
height: 250px;
top: 40%;
left: 33%;
transform: translate(-50%, -40%);
background: url("~@/assets/images/title_bg.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: 0 bottom;
}
.cjy-banner-text {
position: absolute;
width: 1220px;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
.title {
height: 140px;
padding-left: 60px;
font-weight: bold;
font-size: 72px;
color: #fff;
background: url("~@/assets/images/title_bg.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: 0 bottom;
}
.subtitle {
margin-top: -20px;
padding-left: 60px;
font-size: 24px;
color: #fff
}
@ -113,7 +122,7 @@ img {
}
.date{
margin-top: 20px;
color: #475467;
color: #999;
font-size: 14px;}
.more {
margin-top: 20px;
@ -499,14 +508,15 @@ img {
.cjy-tabs {
.el-tabs__nav {
transform: translateX(50%) !important;
display: inline-block;
transform: translateX(-50%) !important;
float: none;
margin-left: -285px;
left: 50%;
}
.el-tabs__nav-wrap::after {
background-color: transparent;
border-bottom: 1px dotted #0B59B3;
border-bottom: 1px dotted rgba(#0B59B3,.5);
}
.el-tabs__item {
@ -893,7 +903,6 @@ img {
.ql-editor {
box-sizing: border-box;
line-height: 1.42;
height: 100%;
outline: none;
overflow-y: auto;
padding: 12px 15px;
@ -1232,7 +1241,7 @@ img {
font-size: 16px;
}
.ql-editor .ql-size-huge {
font-size: 2.5em;
font-size:32px;
}
.ql-editor .ql-direction-rtl {
direction: rtl;

113
src/views/pages/index.vue
Unescape View File

@ -7,11 +7,12 @@
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(banner, index) in formattedBanners" :key="index">
<div class="banner" :style="{ backgroundImage: `url(${banner.logo})` }">
<div class=" v-container">
<div class="text-box">
<h1 class="banner-title" v-html="banner.title ? banner.title : ''"></h1>
<p class="banner-description">{{ banner.subtitle || '' }}</p>
<router-link :to="banner.url ? banner.url : ''" class="learn-more">了解更多</router-link>
</div>
</div></div>
</div>
</div>
</div>
@ -37,12 +38,12 @@
</div>
</div>
<div class="ciontent-text solve-plan-text">
<el-tabs class="pc-el-tabs" stretch v-model="activeName">
<el-tabs class="pc-el-tabs" v-model="activeName">
<el-tab-pane v-for="(product, index) in solvePlan" :key="index" :label="product.title"
:name="'第' + index + '个'">
<div class="solve-plan-tabs-content">
<div class="solve-plan-tabs-content-left">
<div class="solve-plan-tabs-content-left-html"
<div class="ql-editor solve-plan-tabs-content-left-html"
v-html="product.introduction ? product.introduction : ''">
</div>
<div class="saw-detail" @click="gotoDetail(product.id,1)">查看详情&rarr;</div>
@ -66,7 +67,7 @@
</div>
</div>
<div class="ciontent-text solve-plan-text scence-plan-text">
<el-tabs class="pc-el-tabs-dark" stretch v-model="activeName1">
<el-tabs class="pc-el-tabs-dark" v-model="activeName1">
<el-tab-pane v-for="(product, index) in scensePlan" :key="index" :label="product.title"
:name="'第' + index + '个'">
<div class="solve-plan-tabs-content">
@ -74,7 +75,7 @@
<img :src="product.logo ? product.logo : ''" alt="">
</div>
<div class="solve-plan-tabs-content-left">
<div class="solve-plan-tabs-content-left-html"
<div class="ql-editor solve-plan-tabs-content-left-html"
v-html="product.introduction ? product.introduction : ''">
</div>
<div class="saw-detail" @click="gotoDetail(product.id,1)">查看详情&rarr;</div>
@ -102,7 +103,7 @@
</div>
<div class="classic-case-text-right">
<div class="classic-case-text-right-top" v-if="formattedClassicAse[ativeindex]">
<div class="classic-case-text-right-content" v-html="formattedClassicAse[ativeindex].introduction"></div>
<div class="ql-editor classic-case-text-right-content" v-html="formattedClassicAse[ativeindex].introduction"></div>
<div class="classic-case-text-right-top-images-box"
v-if="formattedClassicAse[ativeindex].images.length > 0">
<el-image class="classic-case-text-right-middle-images"
@ -159,7 +160,7 @@
</div>
</div>
<div class="ciontent-text news-text">
<el-tabs class="pc-el-tabs-dark short-tabs" stretch v-model="activeName2" @tab-click="handleClick">
<el-tabs class="cjy-tabs short-tabs" v-model="activeName2" @tab-click="handleClick">
<el-tab-pane label="公司动态" name="first">
<el-row class="news-row" :gutter="40">
<el-col v-for="(item, index) in newsList" class="news-col row" :span="12"
@ -593,13 +594,13 @@ export default {
.text-box {
width: 1000px;
height: 500px;
margin-left: 10%;
padding: 10px;
}
}
.banner-title {
font-size: 68px;
line-height: 90px;
/* 调整标题字体大小 */
font-weight: bold;
opacity: 0;
@ -612,7 +613,7 @@ export default {
text-align: left;
font-size: 22px;
/* 调整描述字体大小 */
margin: 10px 0;
margin: 30px 0 20px 0;
/* 添加上下间距 */
}
@ -642,7 +643,7 @@ export default {
border-radius: 5px;
transition: all 0.3s ease-in-out;
float: left;
font-size: 16px;
&:hover {
background-color: rgba(255, 255, 255, 0.8);
color: #333;
@ -697,7 +698,7 @@ export default {
font-family: PingFang SC;
font-weight: bold;
font-size: 30px;
color: #E5E5E5;
color: rgba(0,0,0,.05);
}
.saw-more-box {
@ -769,10 +770,9 @@ export default {
}
.company-profile {
height: 745px;
height: 800px;
scrollbar-width: none;
overflow: hidden;
overflow-y: scroll;
.company-profile-title {
text-align: center;
@ -783,7 +783,7 @@ export default {
}
.company-profile-text {
height: 515px;
height: 700px;
scrollbar-width: none;
overflow: hidden;
overflow-y: hidden;
@ -807,7 +807,7 @@ export default {
&::after {
content: 'GLOBAL TOURISM SOLUTION' !important;
color: #e5e5e537 !important;
color: rgba(255,255,255,.05) !important;
}
}
@ -824,6 +824,7 @@ export default {
.solve-plan-tabs-content-left-html {
width: 100%;
height: 370px;
line-height: 24px;
padding-top: 20px;
overflow: scroll;
overflow-x: hidden;
@ -982,11 +983,12 @@ export default {
.classic-case-text-right {
width: 895px;
height: 560px;
padding: 40px 35px;
background-color: #fff;
border-radius: 12px;
.classic-case-text-right-top {
height: 430px;
height: 350px;
border-bottom: solid 1px #2a333d1b;
transition: all ease 0.3s;
@ -995,6 +997,7 @@ export default {
overflow-y: scroll;
scrollbar-width: none;
margin-bottom: 25px;
line-height: 24px;
}
.classic-case-text-right-top-images-box {
@ -1007,7 +1010,7 @@ export default {
.classic-case-text-right-middle-images {
width: 360px;
height: 200px;
.el-image__inner{height: auto!important;}
&:not(:first-child) {
margin-left: 10px;
}
@ -1221,8 +1224,8 @@ export default {
.news-time {
transition: all ease 0.3s;
font-size: 16px;
color: #2A333D;
font-size: 14px;
color: #999;
}
.more-jian {
@ -1242,20 +1245,50 @@ export default {
</style>
<style lang="scss">
.pc-el-tabs {
.el-tabs__nav {
display: inline-block;
transform: translateX(-50%) !important;
float: none;
left: 50%;
}
.el-tabs__nav-wrap::after {
background-color: #c2deff5a;
background-color: transparent;
border-bottom: 1px dotted rgba(255,255,255,0.5);
}
.el-tabs__item {
font-size: 16px;
padding: 0 80px;
}
.el-tabs__item:hover {
color: #fff;
cursor: pointer;
}
.el-tabs__item.is-active {
color: #fff;
}
.el-tabs__active-bar {
background-color: #fff;
}
.el-tabs__nav-next {
display: none
}
.el-tabs__nav-prev {
display: none
}
.el-tabs__item.is-active {
color: #fff;
}
.el-tabs__item {
color: #E5F1FF;
color: #fff;
}
@ -1266,23 +1299,49 @@ export default {
.pc-el-tabs-dark {
.el-tabs__active-bar {
background-color: #0B59B3;
.el-tabs__nav {
display: inline-block;
transform: translateX(-50%) !important;
float: none;
left: 50%;
}
.el-tabs__item.is-active {
color: #0B59B3;
.el-tabs__nav-wrap::after {
background-color: transparent;
border-bottom: 1px dotted rgba(#0B59B3,.5);
}
.el-tabs__item {
font-size: 16px;
padding: 0 80px;
}
.el-tabs__item:hover {
color: #0B59B3;
cursor: pointer;
}
.el-tabs__item.is-active {
color: #0B59B3;
}
.el-tabs__active-bar {
background-color: #0B59B3;
}
.el-tabs__nav-next {
display: none
}
.el-tabs__nav-prev {
display: none
}
}
.short-tabs {
.el-tabs__header {
width: 20%;
width: 30%;
margin: 0 auto;
margin-bottom: 45px;
}

5
src/views/pages/news-list.vue
Unescape View File

@ -19,7 +19,7 @@
</div>
<!-- 新闻 列表 -->
<div class="v-container cjy-news-list">
<el-tabs v-model="active" class="cjy-tabs">
<el-tabs v-model="active" class="cjy-tabs" @tab-click="handleClick">
<el-tab-pane label="公司动态" name="first">
<div class="list-item" v-for="(item,index) in news_list" :key="index">
<div class="item-box row" @click="gotoPages(item.id)">
@ -101,6 +101,9 @@ export default {
let res = await Api.getColumnInfoList(this.queryParams)
this.news_list = res.data.list
},
handleClick() {
this.infoPages()
},
// 跳转页面 函数
gotoPages(val) {
this.$router.push("/news-detail?id=" + val)

2
src/views/pages/theme/about-us.vue
Unescape View File

@ -38,7 +38,7 @@
</div>
</div>
</el-col>
<el-col :span="12" class="info" v-html="company_info.content"></el-col>
<el-col :span="12" class="info" v-html="company_info.introduction"></el-col>
</el-row>
</div>
</div>

Write Preview
Loading…
Cancel
Save