Merge pull request 'aboutus的图片没有自适应与projectdetail页面的样式调整' (#7) from Branch_csl into master
Reviewed-on: http://120.46.37.243:3000/cms/feiyang-web/pulls/7
This commit is contained in:
root
commit
8c6c39207e
@ -26,7 +26,7 @@
|
|||||||
<div style="font-size: 26px;color:rgba(0,0,0,.6)">{{componyarr[0].titleUp}}</div>
|
<div style="font-size: 26px;color:rgba(0,0,0,.6)">{{componyarr[0].titleUp}}</div>
|
||||||
<div style="color:rgba(60,115,164);font-size:40px">{{componyarr[0].sketchUp}}</div>
|
<div style="color:rgba(60,115,164);font-size:40px">{{componyarr[0].sketchUp}}</div>
|
||||||
<div style="height: 40px;"></div>
|
<div style="height: 40px;"></div>
|
||||||
<div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;"v-html="componyarr[0].contentUp">
|
<div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;" v-html="componyarr[0].contentUp">
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -64,7 +64,8 @@
|
|||||||
<div style="color:rgba(60,115,164);font-size:40px">{{componyarr[0].sketchIn}}
|
<div style="color:rgba(60,115,164);font-size:40px">{{componyarr[0].sketchIn}}
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 40px;"></div>
|
<div style="height: 40px;"></div>
|
||||||
<div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;" class="init" v-html="componyarr[0].contentIn">
|
<div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;" class="init"
|
||||||
|
v-html="componyarr[0].contentIn">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 40px;"></div>
|
<div style="height: 40px;"></div>
|
||||||
@ -75,7 +76,8 @@
|
|||||||
<div style="color:rgba(60,115,164);font-size:40px">{{componyarr[0].sketchDown}}
|
<div style="color:rgba(60,115,164);font-size:40px">{{componyarr[0].sketchDown}}
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 40px;"></div>
|
<div style="height: 40px;"></div>
|
||||||
<div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;" class="init" v-html="componyarr[0].contentDown">
|
<div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;" class="init"
|
||||||
|
v-html="componyarr[0].contentDown">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 70px;"></div>
|
<div style="height: 70px;"></div>
|
||||||
@ -147,24 +149,25 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 80%;margin: auto;flex-wrap: wrap;justify-content: space-between; display: grid;
|
<div class="images_cl">
|
||||||
grid-template-columns: repeat(auto-fill, minmax(31.33%, 1fr));
|
<div style="width: auto;margin-bottom: 20px;border-radius: 10px;cursor: pointer;"
|
||||||
grid-column-gap: 2%;">
|
v-for="item in honorList" :key="item.id" @click="changeto(item.id)">
|
||||||
<div style="width: auto;margin-bottom: 20px;border-radius: 10px;cursor: pointer;" v-for="item in honorList" :key="item.id" @click="changeto(item.id)">
|
|
||||||
<div style="background-color: rgb(240,246,250); border-radius: 14px 14px 0 0;">
|
<div style="background-color: rgb(240,246,250); border-radius: 14px 14px 0 0;">
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="height: 100%;text-align: center; border: 5px solid #F8F8F8;">
|
<div class="img_cl" style="height: 100%;text-align: center; border: 5px solid #F8F8F8;">
|
||||||
|
|
||||||
|
|
||||||
<img :src="item.picture" alt="200603" style="scale: 0.85;height: 285px;width: 379px"> </div>
|
<img :src="item.picture" alt="200603" style="scale: 0.85;height: 285px;width: 379px">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!honorList.length" style="height: 400px;display: flex;justify-content: center;align-items: center;">
|
<div v-if="!honorList.length"
|
||||||
|
style="height: 400px;display: flex;justify-content: center;align-items: center;">
|
||||||
<div style="color: #999;">该年份暂无内容展示</div>
|
<div style="color: #999;">该年份暂无内容展示</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -181,7 +184,7 @@
|
|||||||
<h3 style="color:rgb(108,108,118);margin: 0;">{{ culturelist[2].name }}</h3>
|
<h3 style="color:rgb(108,108,118);margin: 0;">{{ culturelist[2].name }}</h3>
|
||||||
<h5>{{culturelist[2].synopsis}}</h5>
|
<h5>{{culturelist[2].synopsis}}</h5>
|
||||||
<p style="color: rgb(169,169,169);margin: 0;font-size: 14px;" v-html="culturelist[2].content">
|
<p style="color: rgb(169,169,169);margin: 0;font-size: 14px;" v-html="culturelist[2].content">
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 32%;margin-bottom: 20px;">
|
<div style="width: 32%;margin-bottom: 20px;">
|
||||||
@ -194,7 +197,7 @@
|
|||||||
<h3 style="color:rgb(108,108,118);margin: 0;">{{ culturelist[1].name }}</h3>
|
<h3 style="color:rgb(108,108,118);margin: 0;">{{ culturelist[1].name }}</h3>
|
||||||
<h5>{{culturelist[1].synopsis}}</h5>
|
<h5>{{culturelist[1].synopsis}}</h5>
|
||||||
<p style="color: rgb(169,169,169);margin: 0;font-size: 14px;" v-html="culturelist[1].content">
|
<p style="color: rgb(169,169,169);margin: 0;font-size: 14px;" v-html="culturelist[1].content">
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 32%;margin-bottom: 20px;">
|
<div style="width: 32%;margin-bottom: 20px;">
|
||||||
@ -209,7 +212,7 @@
|
|||||||
<h3 style="color:rgb(108,108,118);margin: 0;">{{ culturelist[0].name }}</h3>
|
<h3 style="color:rgb(108,108,118);margin: 0;">{{ culturelist[0].name }}</h3>
|
||||||
<h5>{{culturelist[0].synopsis}}</h5>
|
<h5>{{culturelist[0].synopsis}}</h5>
|
||||||
<p style="color: rgb(169,169,169);margin: 0;font-size: 14px;" v-html="culturelist[0].content">
|
<p style="color: rgb(169,169,169);margin: 0;font-size: 14px;" v-html="culturelist[0].content">
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -225,23 +228,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { honor,culture,compony } from '@/api';
|
import {
|
||||||
import { honorList } from '@/api';
|
honor,
|
||||||
export default {
|
culture,
|
||||||
|
compony
|
||||||
|
} from '@/api';
|
||||||
|
import {
|
||||||
|
honorList
|
||||||
|
} from '@/api';
|
||||||
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeName: 'first',
|
activeName: 'first',
|
||||||
timeIndex: 0,
|
timeIndex: 0,
|
||||||
timeLineList:
|
timeLineList: [{
|
||||||
[
|
|
||||||
{
|
|
||||||
"timestamp": "全部",
|
"timestamp": "全部",
|
||||||
"color": "#999",
|
"color": "#999",
|
||||||
"fontsize": 18,
|
"fontsize": 18,
|
||||||
"year": "all",
|
"year": "all",
|
||||||
"bgcolor": "#e4e7ed",
|
"bgcolor": "#e4e7ed",
|
||||||
|
|
||||||
},{
|
}, {
|
||||||
"timestamp": "2024年",
|
"timestamp": "2024年",
|
||||||
"color": "#999",
|
"color": "#999",
|
||||||
"fontsize": 18,
|
"fontsize": 18,
|
||||||
@ -310,39 +317,43 @@ export default {
|
|||||||
"year": "2017",
|
"year": "2017",
|
||||||
"info": "chengli"
|
"info": "chengli"
|
||||||
}],
|
}],
|
||||||
honorList:[],
|
honorList: [],
|
||||||
culturelist:[],
|
culturelist: [],
|
||||||
componyarr:[],
|
componyarr: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted() {
|
||||||
// honor({'year':'2019'}).then((res)=>{
|
// honor({'year':'2019'}).then((res)=>{
|
||||||
// console.log(res)
|
// console.log(res)
|
||||||
// })
|
// })
|
||||||
compony().then((res)=>{
|
compony().then((res) => {
|
||||||
this.componyarr=res.data
|
this.componyarr = res.data
|
||||||
})
|
})
|
||||||
if(this.$route.query.category){
|
if (this.$route.query.category) {
|
||||||
this.activeName='second'
|
this.activeName = 'second'
|
||||||
}
|
}
|
||||||
this.getHonner('all')
|
this.getHonner('all')
|
||||||
culture().then((res)=>{
|
culture().then((res) => {
|
||||||
this.culturelist=res.data
|
this.culturelist = res.data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
async getHonner(year){
|
async getHonner(year) {
|
||||||
|
|
||||||
|
|
||||||
const {data:res} = await honorList({'year':year});
|
const {
|
||||||
|
data: res
|
||||||
|
} = await honorList({
|
||||||
|
'year': year
|
||||||
|
});
|
||||||
console.log(res)
|
console.log(res)
|
||||||
this.honorList = res
|
this.honorList = res
|
||||||
},
|
},
|
||||||
handleClick(tab, event) {
|
handleClick(tab, event) {
|
||||||
console.log(tab.index);
|
console.log(tab.index);
|
||||||
},
|
},
|
||||||
changeActive(index,item) {
|
changeActive(index, item) {
|
||||||
this.timeIndex = index;
|
this.timeIndex = index;
|
||||||
console.log(item)
|
console.log(item)
|
||||||
this.getHonner(item.year)
|
this.getHonner(item.year)
|
||||||
@ -355,8 +366,7 @@ export default {
|
|||||||
// this.$refs.mytimeline.style.marginLeft = marginLeft - 220 + 'px';
|
// this.$refs.mytimeline.style.marginLeft = marginLeft - 220 + 'px';
|
||||||
if (this.timeIndex < 1) {
|
if (this.timeIndex < 1) {
|
||||||
return
|
return
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
this.timeIndex = this.timeIndex - 1
|
this.timeIndex = this.timeIndex - 1
|
||||||
console.log(this.timeIndex)
|
console.log(this.timeIndex)
|
||||||
const year = this.timeLineList[this.timeIndex].year
|
const year = this.timeLineList[this.timeIndex].year
|
||||||
@ -379,27 +389,50 @@ export default {
|
|||||||
this.getHonner(year)
|
this.getHonner(year)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
changeto(id){
|
changeto(id) {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: '/honordetail?id=' + id
|
path: '/honordetail?id=' + id
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.compbg {
|
.images_cl {
|
||||||
background-image: url('../assets/images/banner.png');
|
width: 80%;
|
||||||
}
|
margin: auto;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(31.33%, 1fr));
|
||||||
|
}
|
||||||
|
@media screen and (max-width:1523px) {
|
||||||
|
.img_cl {
|
||||||
|
img {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.page_ban {
|
@media screen and (max-width:1241px) {
|
||||||
|
.images_cl {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.compbg {
|
||||||
|
background-image: url('../assets/images/banner.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_ban {
|
||||||
height: 404px;
|
height: 404px;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_ban .img {
|
.page_ban .img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
@ -408,41 +441,41 @@ export default {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_ban .content {
|
.page_ban .content {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav {
|
.page_nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div,
|
div,
|
||||||
li {
|
li {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .name {
|
.page_nav .name {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .list {
|
.page_nav .list {
|
||||||
position: relative;
|
position: relative;
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: -35px;
|
margin-right: -35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav a {
|
.page_nav a {
|
||||||
float: left;
|
float: left;
|
||||||
line-height: 76px;
|
line-height: 76px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -451,26 +484,26 @@ li {
|
|||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .name a {
|
.page_nav .name a {
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
/* background: url() no-repeat left 30px; */
|
/* background: url() no-repeat left 30px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .list {
|
.page_nav .list {
|
||||||
position: relative;
|
position: relative;
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: -35px;
|
margin-right: -35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .list a {
|
.page_nav .list a {
|
||||||
color: #e7dfd2;
|
color: #e7dfd2;
|
||||||
color: rgba(231, 223, 210, .7);
|
color: rgba(231, 223, 210, .7);
|
||||||
margin-right: 35px;
|
margin-right: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav a {
|
.page_nav a {
|
||||||
float: left;
|
float: left;
|
||||||
line-height: 76px;
|
line-height: 76px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -478,33 +511,33 @@ li {
|
|||||||
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .inner_bor {
|
.page_nav .inner_bor {
|
||||||
height: 4px;
|
height: 4px;
|
||||||
background: #f23c39;
|
background: #f23c39;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -4px;
|
bottom: -4px;
|
||||||
left: 0;
|
left: 0;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-tabs__item {
|
::v-deep .el-tabs__item {
|
||||||
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-tabs__nav-wrap::after {
|
::v-deep .el-tabs__nav-wrap::after {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg {
|
.bg {
|
||||||
background-image: url(' ../assets/images/公司简介背景.png');
|
background-image: url(' ../assets/images/公司简介背景.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about2 .bg {
|
.about2 .bg {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 540px;
|
height: 540px;
|
||||||
@ -517,9 +550,9 @@ li {
|
|||||||
-moz-border-radius: 14px;
|
-moz-border-radius: 14px;
|
||||||
-ms-border-radius: 14px;
|
-ms-border-radius: 14px;
|
||||||
-o-border-radius: 14px;
|
-o-border-radius: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about2 .float {
|
.about2 .float {
|
||||||
width: 335px;
|
width: 335px;
|
||||||
height: 286px;
|
height: 286px;
|
||||||
background: no-repeat center;
|
background: no-repeat center;
|
||||||
@ -528,115 +561,115 @@ li {
|
|||||||
top: 43px;
|
top: 43px;
|
||||||
left: 76px;
|
left: 76px;
|
||||||
background-image: url('../assets/images/com-logo.png');
|
background-image: url('../assets/images/com-logo.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.about2 .introduce {
|
.about2 .introduce {
|
||||||
width: 60.5%;
|
width: 60.5%;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about2 h3 {
|
.about2 h3 {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
/* letter-spacing: 44px; */
|
/* letter-spacing: 44px; */
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
margin-bottom: 22px;
|
margin-bottom: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about2 p {
|
.about2 p {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
color: #262a3b;
|
color: #262a3b;
|
||||||
color: rgba(38, 42, 59, .7);
|
color: rgba(38, 42, 59, .7);
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about_4 {
|
.about_4 {
|
||||||
min-height: 660px;
|
min-height: 660px;
|
||||||
background: url('../assets/images/bg.png') no-repeat center;
|
background: url('../assets/images/bg.png') no-repeat center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about_4 .content {
|
.about_4 .content {
|
||||||
padding: 138px 0 0;
|
padding: 138px 0 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about_4 h3 {
|
.about_4 h3 {
|
||||||
font-family: 'Rajdhani';
|
font-family: 'Rajdhani';
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
color: rgba(255, 255, 255, .5);
|
color: rgba(255, 255, 255, .5);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about_4 h5 {
|
.about_4 h5 {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: #00b4b7;
|
color: #00b4b7;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin: 8px 0 10px;
|
margin: 8px 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about_4 p {
|
.about_4 p {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
color: rgba(255, 255, 255, .44);
|
color: rgba(255, 255, 255, .44);
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about_4 h6 {
|
.about_4 h6 {
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
color: #00b4b7;
|
color: #00b4b7;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
margin: 52px 0 12px;
|
margin: 52px 0 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about_4 ul {
|
.about_4 ul {
|
||||||
padding-left: 18px;
|
padding-left: 18px;
|
||||||
list-style: inherit;
|
list-style: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about_4 li {
|
.about_4 li {
|
||||||
list-style: inherit;
|
list-style: inherit;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about_4 .bl_map {
|
.about_4 .bl_map {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 87px;
|
top: 87px;
|
||||||
right: -110px;
|
right: -110px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bl_map {
|
.bl_map {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 951px;
|
width: 951px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bl_map .scope.s3 {
|
.bl_map .scope.s3 {
|
||||||
width: 166px;
|
width: 166px;
|
||||||
height: 166px;
|
height: 166px;
|
||||||
left: 62%;
|
left: 62%;
|
||||||
top: 21%;
|
top: 21%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bl_map .scope {
|
.bl_map .scope {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bl_map .scope.s3:before {
|
.bl_map .scope.s3:before {
|
||||||
animation: h_map 2s .6s linear alternate infinite;
|
animation: h_map 2s .6s linear alternate infinite;
|
||||||
-webkit-animation: h_map 2s .6s linear alternate infinite;
|
-webkit-animation: h_map 2s .6s linear alternate infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bl_map .scope:before {
|
.bl_map .scope:before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -654,9 +687,9 @@ li {
|
|||||||
-webkit-filter: alpha(opacity=50);
|
-webkit-filter: alpha(opacity=50);
|
||||||
animation: h_map 2s linear alternate infinite;
|
animation: h_map 2s linear alternate infinite;
|
||||||
-webkit-animation: h_map 2s linear alternate infinite;
|
-webkit-animation: h_map 2s linear alternate infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes h_map {
|
@keyframes h_map {
|
||||||
0% {
|
0% {
|
||||||
|
|
||||||
transform: scale(.6);
|
transform: scale(.6);
|
||||||
@ -666,14 +699,14 @@ li {
|
|||||||
|
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bl_map .scope.s3 p {
|
.bl_map .scope.s3 p {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bl_map .scope p {
|
.bl_map .scope p {
|
||||||
font-size: 14.5px;
|
font-size: 14.5px;
|
||||||
color: #c2cff3;
|
color: #c2cff3;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -681,74 +714,75 @@ li {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
margin-top: -12px;
|
margin-top: -12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my_timeline_prev,
|
.my_timeline_prev,
|
||||||
.my_timeline_next {
|
.my_timeline_next {
|
||||||
float: left;
|
float: left;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my_timeline_prev {
|
.my_timeline_prev {
|
||||||
/* width: 200px; */
|
/* width: 200px; */
|
||||||
/* float: left; */
|
/* float: left; */
|
||||||
flex: 0.5
|
flex: 0.5
|
||||||
}
|
}
|
||||||
|
|
||||||
.my_timeline_next {
|
.my_timeline_next {
|
||||||
/* width: 34px;
|
/* width: 34px;
|
||||||
margin-left: -22px; */
|
margin-left: -22px; */
|
||||||
flex: 0.5
|
flex: 0.5
|
||||||
}
|
}
|
||||||
.init p{
|
|
||||||
margin:16px 0
|
|
||||||
|
|
||||||
}
|
.init p {
|
||||||
.ul_box {
|
margin: 16px 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.ul_box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: left;
|
float: left;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my_timeline_item {
|
.my_timeline_item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.my_timeline_node {
|
.my_timeline_node {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my_timeline_node.active {
|
.my_timeline_node.active {
|
||||||
background-color: #fff !important;
|
background-color: #fff !important;
|
||||||
color: rgb(0, 113, 203);
|
color: rgb(0, 113, 203);
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my_timeline_item_line {
|
.my_timeline_item_line {
|
||||||
/* width: 100%; */
|
/* width: 100%; */
|
||||||
height: 10px;
|
height: 10px;
|
||||||
/* margin: -14px 0 0 28px; */
|
/* margin: -14px 0 0 28px; */
|
||||||
border-top: 2px solid #E4E7ED;
|
border-top: 2px solid #E4E7ED;
|
||||||
border-left: none;
|
border-left: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my_timeline_item_content {
|
.my_timeline_item_content {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-family: 'Rajdhani';
|
font-family: 'Rajdhani';
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
@ -758,6 +792,6 @@ h5 {
|
|||||||
letter-spacing: -1px;
|
letter-spacing: -1px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
width:203px;
|
width: 203px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -8,7 +8,7 @@
|
|||||||
<a style="padding: 0;" href="/project">工程资讯</a> <a href="javascript:;">工程详情</a>
|
<a style="padding: 0;" href="/project">工程资讯</a> <a href="javascript:;">工程详情</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="list" style="bottom:-15px">
|
<div class="list" style="bottom:-15px">
|
||||||
<el-tabs v-model="activeName" >
|
<el-tabs v-model="activeName">
|
||||||
<el-tab-pane label="工程详情" name="first"></el-tab-pane>
|
<el-tab-pane label="工程详情" name="first"></el-tab-pane>
|
||||||
|
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
@ -33,7 +33,7 @@
|
|||||||
<div class="jzmsms">建筑高度</div>
|
<div class="jzmsms">建筑高度</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 70%;">
|
<div style="width: 70%;">
|
||||||
<div class="content ql-editor" style="text-align: center;">
|
<div class="content ql-editor" style="text-align: center;">
|
||||||
<div class="name">{{ name }}</div>
|
<div class="name">{{ name }}</div>
|
||||||
@ -53,30 +53,32 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { projectdetail } from '@/api';
|
import {
|
||||||
export default{
|
projectdetail
|
||||||
data(){
|
} from '@/api';
|
||||||
return{
|
export default {
|
||||||
name:'',
|
data() {
|
||||||
content:'',
|
return {
|
||||||
time:'',
|
name: '',
|
||||||
area:'',
|
content: '',
|
||||||
height:''
|
time: '',
|
||||||
|
area: '',
|
||||||
|
height: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods: {
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted() {
|
||||||
projectdetail(this.$route.query).then((res)=>{
|
projectdetail(this.$route.query).then((res) => {
|
||||||
this.content=res.data.particulars
|
this.content = res.data.particulars
|
||||||
this.name=res.data.name
|
this.name = res.data.name
|
||||||
this.time=res.data.completeTime
|
this.time = res.data.completeTime
|
||||||
this.area=res.data.area
|
this.area = res.data.area
|
||||||
this.height=res.data.height
|
this.height = res.data.height
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.divider {
|
.divider {
|
||||||
@ -85,59 +87,64 @@ export default{
|
|||||||
background-color: #0059a7;
|
background-color: #0059a7;
|
||||||
position: static;
|
position: static;
|
||||||
margin-bottom: 28px;
|
margin-bottom: 28px;
|
||||||
}
|
}
|
||||||
.name {
|
|
||||||
|
.name {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: #0007a9;
|
color: #0007a9;
|
||||||
color: rgba(0, 7, 169, .8);
|
color: rgba(0, 7, 169, .8);
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
.news_d {
|
|
||||||
padding: 60px 0 90px;
|
.news_d {
|
||||||
|
padding: 60px 0 0px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.Wrapper {
|
|
||||||
|
.Wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
/* .news_d .name {
|
|
||||||
|
/* .news_d .name {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: #0007a9;
|
color: #0007a9;
|
||||||
color: rgba(0, 7, 169, .8);
|
color: rgba(0, 7, 169, .8);
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
} */
|
} */
|
||||||
|
|
||||||
::v-deep .el-tabs__item {
|
::v-deep .el-tabs__item {
|
||||||
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-tabs__nav-wrap::after {
|
::v-deep .el-tabs__nav-wrap::after {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
.news_d .con p {
|
|
||||||
|
.news_d .con p {
|
||||||
font-size: 14.5px;
|
font-size: 14.5px;
|
||||||
color: #8e8e95;
|
color: #8e8e95;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
margin-bottom: 26px;
|
margin-bottom: 26px;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.compbg {
|
.compbg {
|
||||||
background-image: url('../assets/images/banner.png');
|
background-image: url('../assets/images/banner.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_ban {
|
.page_ban {
|
||||||
height: 404px;
|
height: 404px;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_ban .img {
|
.page_ban .img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
@ -146,11 +153,13 @@ background-color: transparent;
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.top-box{
|
|
||||||
|
.top-box {
|
||||||
margin: 16px 0 30px;
|
margin: 16px 0 30px;
|
||||||
}
|
}
|
||||||
.date{
|
|
||||||
|
.date {
|
||||||
|
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
color: #dfd4c3;
|
color: #dfd4c3;
|
||||||
@ -159,38 +168,41 @@ background-color: transparent;
|
|||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.page_ban .content {
|
|
||||||
|
.page_ban .content {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.content {
|
|
||||||
|
.content {
|
||||||
width: 86%;
|
width: 86%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav {
|
.page_nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
div,
|
|
||||||
li {
|
div,
|
||||||
|
li {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .name {
|
.page_nav .name {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .list {
|
.page_nav .list {
|
||||||
position: relative;
|
position: relative;
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: -35px;
|
margin-right: -35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav a {
|
.page_nav a {
|
||||||
float: left;
|
float: left;
|
||||||
line-height: 76px;
|
line-height: 76px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -199,26 +211,26 @@ li {
|
|||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .name a {
|
.page_nav .name a {
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
/* background: url() no-repeat left 30px; */
|
/* background: url() no-repeat left 30px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .list {
|
.page_nav .list {
|
||||||
position: relative;
|
position: relative;
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: -35px;
|
margin-right: -35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .list a {
|
.page_nav .list a {
|
||||||
color: #e7dfd2;
|
color: #e7dfd2;
|
||||||
color: rgba(231, 223, 210, .7);
|
color: rgba(231, 223, 210, .7);
|
||||||
margin-right: 35px;
|
margin-right: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav a {
|
.page_nav a {
|
||||||
float: left;
|
float: left;
|
||||||
line-height: 76px;
|
line-height: 76px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -226,49 +238,57 @@ li {
|
|||||||
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.z_xq_cont_top_lt {
|
|
||||||
|
.z_xq_cont_top_lt {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin-top: 55px;
|
margin-top: 55px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.z_xq_cont_top_ls {
|
|
||||||
|
.z_xq_cont_top_ls {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #263d8f;
|
color: #263d8f;
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
.z_xq_cont_top_lc {
|
|
||||||
|
.z_xq_cont_top_lc {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.z_xq_cont_top_lc img {
|
|
||||||
|
.z_xq_cont_top_lc img {
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
.z_xq_cont_top_lx {
|
|
||||||
|
.z_xq_cont_top_lx {
|
||||||
height: 88px;
|
height: 88px;
|
||||||
border-left: 1px solid #CCCCCC;
|
border-left: 1px solid #CCCCCC;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
}
|
}
|
||||||
.z_xq_cont_top_lx .jzmssj {
|
|
||||||
|
.z_xq_cont_top_lx .jzmssj {
|
||||||
font-size: 46px;
|
font-size: 46px;
|
||||||
color: #263d8f;
|
color: #263d8f;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
line-height: 52px;
|
line-height: 52px;
|
||||||
}
|
}
|
||||||
.z_xq_cont_top_lx .jzmssj .dwi {
|
|
||||||
|
.z_xq_cont_top_lx .jzmssj .dwi {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666666;
|
color: #666666;
|
||||||
}
|
}
|
||||||
.cont{
|
|
||||||
width: 70%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.cont >>> img{
|
|
||||||
max-width:500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.cont {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cont>>>img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user