all
This commit is contained in:
dzj
parent
d6f103d196
commit
352e98d28b
@ -78,4 +78,17 @@ export function projectdetail(params){
|
|||||||
url:'/engineering/details',
|
url:'/engineering/details',
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
//企业文化
|
||||||
|
export function culture(){
|
||||||
|
return request({
|
||||||
|
url:'/organization/list'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//荣誉详情
|
||||||
|
export function honordetail(params){
|
||||||
|
return request({
|
||||||
|
url:'/honor/byId',
|
||||||
|
params
|
||||||
|
})
|
||||||
}
|
}
|
||||||
@ -8,6 +8,7 @@ import recruit from '@/views/recruit.vue'
|
|||||||
import contactus from '@/views/contactus.vue'
|
import contactus from '@/views/contactus.vue'
|
||||||
import detail from '@/views/detail.vue'
|
import detail from '@/views/detail.vue'
|
||||||
import projectdetail from '@/views/projectdetail.vue'
|
import projectdetail from '@/views/projectdetail.vue'
|
||||||
|
import honordetail from '@/views/honordetail.vue'
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
@ -44,6 +45,10 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path:'/projectdetail',
|
path:'/projectdetail',
|
||||||
component:projectdetail
|
component:projectdetail
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path:'/honordetail',
|
||||||
|
component:honordetail
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@ -5,8 +5,9 @@
|
|||||||
<div class="bd" style="height: 581px;position: relative;">
|
<div class="bd" style="height: 581px;position: relative;">
|
||||||
<div class="swiper-container swiper5">
|
<div class="swiper-container swiper5">
|
||||||
<div class="swiper-wrapper">
|
<div class="swiper-wrapper">
|
||||||
<div class="swiper-slide" v-for="item in imgarr" :key="item.id"><img :src="item.url" style="width: 100%;height:100%;"></div>
|
<div class="swiper-slide" v-for="item in imgarr" :key="item.id"><img :src="item.url"
|
||||||
|
style="width: 100%;height:100%;"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="swiper-pagination"></div>
|
<div class="swiper-pagination"></div>
|
||||||
<div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
|
<div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
|
||||||
@ -33,49 +34,44 @@
|
|||||||
保利发展控股股票代码</h3>
|
保利发展控股股票代码</h3>
|
||||||
<h5 class="red green"><em style="display: block;">8.03</em>RMB</h5>
|
<h5 class="red green"><em style="display: block;">8.03</em>RMB</h5>
|
||||||
</div> -->
|
</div> -->
|
||||||
<!-- 暂定动态 -->
|
<!-- 暂定动态 -->
|
||||||
<div style="width: 50%;"></div>
|
<div style="width: 50%;"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
<div class="index-top" @click="changeto(newsitem.id) " style="cursor: pointer;" >
|
<div class="index-top" @click="changeto(newsitem.id)" style="cursor: pointer;">
|
||||||
<h3 style=" font-size: 24px;
|
<h3 style=" font-size: 24px;
|
||||||
color: #3c3c48;
|
color: #3c3c48;
|
||||||
color: rgba(60, 60, 72, .8);
|
color: rgba(60, 60, 72, .8);
|
||||||
line-height: 30px;">{{newsitem.name}}</h3>
|
line-height: 30px;">{{ newsitem.name }}</h3>
|
||||||
<h5 style=" width: auto;
|
<h5 style=" width: auto;
|
||||||
float: none;
|
float: none;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: #c0a988;
|
color: #c0a988;
|
||||||
margin: 3px 0 6px; line-height: 1;
|
margin: 3px 0 6px; line-height: 1;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
letter-spacing: -.2px;font-family: 'Rajdhani';">{{newsitem.releaseTime}}</h5>
|
letter-spacing: -.2px;font-family: 'Rajdhani';">{{ newsitem.releaseTime }}</h5>
|
||||||
<p style=" color: rgba(115, 115, 124, .6); font-size: 13px;
|
<p style=" color: rgba(115, 115, 124, .6); font-size: 13px;
|
||||||
color: #95959d;
|
color: #95959d;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
text-align: justify;">{{newsitem.source}}
|
text-align: justify;">{{ newsitem.source }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div style="overflow: hidden;">
|
<div style="overflow: hidden;">
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div @click="changeto(false)" style="cursor: pointer;">
|
<div @click="changeto(false)" style="cursor: pointer;">
|
||||||
|
<div class="dot_box" style=" font-size: 0;
|
||||||
<div class="dot_box" style=" font-size: 0;
|
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;"
|
position: relative;">
|
||||||
|
<div class="i"></div>
|
||||||
>
|
<div class="i"></div>
|
||||||
<div class="i"></div>
|
<div class="i"></div>
|
||||||
<div class="i"></div>
|
</div>
|
||||||
<div class="i"></div>
|
<div class="text">更多新闻</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">更多新闻</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -90,7 +86,7 @@
|
|||||||
<h6>INDUSTRY TRENDS</h6>
|
<h6>INDUSTRY TRENDS</h6>
|
||||||
</div>
|
</div>
|
||||||
<div class="textbox" v-html="hydata.content">
|
<div class="textbox" v-html="hydata.content">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content2-right">
|
<div class="content2-right">
|
||||||
@ -98,19 +94,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="index_3">
|
<div class="index_3" :style=" {background: `url(${bgtextitem.url})`, norepeat: 'center'}">
|
||||||
<div style="position: relative;height: 100%;width: 80%;margin: 0 auto;">
|
<div style="position: relative;height: 100%;width: 80%;margin: 0 auto;">
|
||||||
<div class="tiltle">
|
<div class="tiltle">
|
||||||
<!-- 飞阳建设工程业务领域<br>
|
<!-- 飞阳建设工程业务领域<br>
|
||||||
建筑产业<br>
|
建筑产业<br>
|
||||||
现代化发展趋势 -->
|
现代化发展趋势 -->
|
||||||
<h3 class="init" v-html="bgtextitem.content">
|
<h3 class="init" v-html="bgtextitem.contentUp">
|
||||||
|
|
||||||
|
|
||||||
</h3>
|
</h3>
|
||||||
<div class="init2" v-html="bgtextitem.contents">
|
<div class="init2" v-html="bgtextitem.contentDown">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <p style="width: 500px;">
|
||||||
|
飞阳包含房屋建筑市政公路、工业建筑，金属门窗、”钢结构广等业务领域 致力于数据化、智能化创新发展，积极探索建筑产业现代化发展趋势
|
||||||
|
</p> -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="list" style="position: absolute;
|
<div class="list" style="position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -119,9 +119,10 @@
|
|||||||
z-index: 2;">
|
z-index: 2;">
|
||||||
<div class="swiper2" style="max-width: 80vw;overflow: hidden;height: 100%;">
|
<div class="swiper2" style="max-width: 80vw;overflow: hidden;height: 100%;">
|
||||||
<div class="swiper-wrapper swiper9">
|
<div class="swiper-wrapper swiper9">
|
||||||
|
|
||||||
<div class="swiper-slide" style="height: 100%;" v-for="item in smallPicturearr" :key="item.id"><img :src="item.picture" style=" border-radius: 10px;width: 396px;height:263px;"></div>
|
<div class="swiper-slide" style="height: 100%;" v-for="item in smallPicturearr" :key="item.id"><img
|
||||||
|
:src="item.picture" style=" border-radius: 10px;width: 396px;height:263px;"></div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="swiper-pagination2" style="text-align: center;"></div>
|
<div class="swiper-pagination2" style="text-align: center;"></div>
|
||||||
@ -149,29 +150,32 @@
|
|||||||
|
|
||||||
<!-- <h3></h3> -->
|
<!-- <h3></h3> -->
|
||||||
<h5 style="line-height: 20px;">荣获行业诸多奖项<br>
|
<h5 style="line-height: 20px;">荣获行业诸多奖项<br>
|
||||||
拥有一支高素质的专业管理团队<span style="color:RGB(48, 113, 183);float: right;font-weight: bold;cursor: pointer;" @click="switchto">MORE...</span>
|
拥有一支高素质的专业管理团队<span style="color:RGB(48, 113, 183);float: right;font-weight: bold;cursor: pointer;"
|
||||||
|
@click="switchto">MORE...</span>
|
||||||
</h5>
|
</h5>
|
||||||
<!-- <h5></h5> -->
|
<!-- <h5></h5> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="max-width: 80vw;overflow: hidden;height: 100%;margin: auto;">
|
<div style="max-width: 80vw;overflow: hidden;height: 100%;margin: auto;">
|
||||||
<div class="swiper3" >
|
<div class="swiper3">
|
||||||
<div class="swiper-wrapper swiper9" >
|
<div class="swiper-wrapper swiper9">
|
||||||
<div class="swiper-slide" v-for="item in achievementarr" :key="item.id" style="background-color: rgb(240,246,250);border-radius: 10px;padding: 40px;box-sizing: border-box;"><img :src="item.url" style=" width: 100%;margin: auto;"></div>
|
<div class="swiper-slide" v-for="item in achievementarr" :key="item.id"
|
||||||
|
@click="honorto(item.id)"
|
||||||
|
style="background-color: rgb(240,246,250);border-radius: 10px;padding: 40px;box-sizing: border-box;cursor: pointer;">
|
||||||
</div>
|
<img :src="item.picture" style=" width: 100%;margin: auto;"></div>
|
||||||
<div class="swiper-pagination1" style="text-align: center;"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="swiper-pagination1" style="text-align: center;"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@ -183,89 +187,89 @@
|
|||||||
|
|
||||||
import Swiper from 'swiper'
|
import Swiper from 'swiper'
|
||||||
import 'swiper/css/swiper.min.css'
|
import 'swiper/css/swiper.min.css'
|
||||||
import { achievementPic, hyDtai,swiperimg,getnews,backgroundText,smallPicture } from '@/api'
|
import { achievementPic, hyDtai, swiperimg, getnews, backgroundText, smallPicture,honor } from '@/api'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
hydata:{src:''},
|
hydata: { src: '' },
|
||||||
imgarr:[],
|
imgarr: [],
|
||||||
achievementarr:[],
|
achievementarr: [],
|
||||||
newsitem:{},
|
newsitem: {},
|
||||||
bgtextitem:{},
|
bgtextitem: {},
|
||||||
smallPicturearr:[]
|
smallPicturearr: []
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
//大图轮播图
|
//大图轮播图
|
||||||
swiperimg().then((res)=>{
|
swiperimg().then((res) => {
|
||||||
this.imgarr=res.data
|
this.imgarr = res.data
|
||||||
this.$nextTick(()=>{
|
this.$nextTick(() => {
|
||||||
new Swiper('.swiper5', {
|
new Swiper('.swiper5', {
|
||||||
loop: true,
|
loop: true,
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 4100,
|
delay: 4100,
|
||||||
disableOnInteraction: false,
|
disableOnInteraction: false,
|
||||||
},
|
},
|
||||||
|
|
||||||
pagination: {
|
pagination: {
|
||||||
el: '.swiper-pagination',
|
el: '.swiper-pagination',
|
||||||
|
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
},
|
|
||||||
navigation: {
|
|
||||||
nextEl: '.swiper-button-next',
|
|
||||||
prevEl: '.swiper-button-prev',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
//行业动态
|
//行业动态
|
||||||
hyDtai().then((res)=>{
|
hyDtai().then((res) => {
|
||||||
this.hydata.src=res.data[0].picture
|
this.hydata.src = res.data[0].picture
|
||||||
this.hydata.content=res.data[0].content
|
this.hydata.content = res.data[0].content
|
||||||
})
|
})
|
||||||
//背景图文轮播图
|
//背景图文轮播图
|
||||||
smallPicture().then((res)=>{
|
smallPicture().then((res) => {
|
||||||
this.smallPicturearr=res.data
|
this.smallPicturearr = res.data
|
||||||
this.$nextTick(()=>{
|
this.$nextTick(() => {
|
||||||
new Swiper('.swiper2', {
|
new Swiper('.swiper2', {
|
||||||
slidesPerView: 3,
|
slidesPerView: 3,
|
||||||
slidesPerGroup: 1,
|
slidesPerGroup: 1,
|
||||||
spaceBetween: 20,
|
spaceBetween: 20,
|
||||||
pagination: {
|
pagination: {
|
||||||
el: '.swiper-pagination2'
|
el: '.swiper-pagination2'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
//荣誉展示
|
//荣誉展示
|
||||||
achievementPic().then((res)=>{
|
honor({'year':'all'}).then((res) => {
|
||||||
this.achievementarr=res.data
|
this.achievementarr = res.data
|
||||||
this.$nextTick(()=>{
|
this.$nextTick(() => {
|
||||||
new Swiper('.swiper3', {
|
new Swiper('.swiper3', {
|
||||||
slidesPerView: 4,
|
slidesPerView: 4,
|
||||||
slidesPerGroup: 1,
|
slidesPerGroup: 1,
|
||||||
spaceBetween: 20,
|
spaceBetween: 20,
|
||||||
pagination: {
|
pagination: {
|
||||||
el: '.swiper-pagination1'
|
el: '.swiper-pagination1'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
//新闻展示
|
//新闻展示
|
||||||
getnews({'page':0}).then((res)=>{
|
getnews({ 'page': 0 }).then((res) => {
|
||||||
this.newsitem=res.data.content[1]
|
this.newsitem = res.data.content[1]
|
||||||
})
|
})
|
||||||
//图文展示
|
//图文展示
|
||||||
backgroundText().then((res)=>{
|
backgroundText().then((res) => {
|
||||||
this.bgtextitem=res.data[0]
|
this.bgtextitem = res.data[0]
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
// 创建交叉观察器实例
|
// 创建交叉观察器实例
|
||||||
// this.observer = new IntersectionObserver(entries => {
|
// this.observer = new IntersectionObserver(entries => {
|
||||||
// entries.forEach(entry => {
|
// entries.forEach(entry => {
|
||||||
@ -286,27 +290,33 @@ export default {
|
|||||||
|
|
||||||
|
|
||||||
// 初始化Swiper
|
// 初始化Swiper
|
||||||
|
|
||||||
},
|
},
|
||||||
methods:{
|
methods: {
|
||||||
switchto(){
|
switchto() {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path:'/aboutus'
|
path: '/aboutus',
|
||||||
})
|
query:{'category':'honor'}
|
||||||
},
|
})
|
||||||
changeto(id){
|
},
|
||||||
if(id){
|
changeto(id) {
|
||||||
|
if (id) {
|
||||||
|
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path:'/detail?id='+id
|
path: '/detail?id=' + id
|
||||||
})
|
})
|
||||||
}else{
|
} else {
|
||||||
console.log(id)
|
console.log(id)
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path:'/news'
|
path: '/news'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
honorto(id){
|
||||||
|
this.$router.push({
|
||||||
|
path: '/honordetail?id=' + id
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@ -357,7 +367,7 @@ export default {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-slide1 {
|
.swiper-slide1 {
|
||||||
min-width: calc(26.66666vw - 14px);
|
min-width: calc(26.66666vw - 14px);
|
||||||
max-width: calc(26.66666vw - 14px);
|
max-width: calc(26.66666vw - 14px);
|
||||||
|
|
||||||
@ -366,12 +376,12 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.swiper-slide2{
|
.swiper-slide2 {
|
||||||
width:100%;
|
width: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-slide::after {
|
.swiper-slide::after {
|
||||||
content: '';
|
content: '';
|
||||||
left: 0px;
|
left: 0px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -439,7 +449,7 @@ h6 {
|
|||||||
|
|
||||||
.index-top {
|
.index-top {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: 24px;
|
padding-bottom: 24px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
border-bottom: 2px solid #c9c9c9;
|
border-bottom: 2px solid #c9c9c9;
|
||||||
border-bottom: 2px solid rgba(201, 201, 201, .5);
|
border-bottom: 2px solid rgba(201, 201, 201, .5);
|
||||||
@ -475,7 +485,7 @@ padding-bottom: 24px;
|
|||||||
padding-top: 140px;
|
padding-top: 140px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 604px;
|
height: 604px;
|
||||||
background: url(http://1.94.20.201/fyapi/images/86e81da7-b406-45ad-a8b6-94be672da4a2.png) no-repeat center;
|
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
@ -484,7 +494,7 @@ padding-bottom: 24px;
|
|||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
color: RGB(48, 113, 183);
|
color: RGB(48, 113, 183);
|
||||||
line-height: 60px;
|
line-height: 60px;
|
||||||
margin-top:48px;
|
margin-top: 48px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
}
|
}
|
||||||
@ -495,35 +505,40 @@ padding-bottom: 24px;
|
|||||||
color: rgba(255, 255, 255, .5);
|
color: rgba(255, 255, 255, .5);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.swiper9 .swiper-slide::after{
|
|
||||||
all:initial
|
.swiper9 .swiper-slide::after {
|
||||||
|
all: initial
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-slide9 img {
|
.swiper-slide9 img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
}
|
|
||||||
.dot_box .i{
|
|
||||||
display: inline-block;
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
|
|
||||||
background-color: RGB(48, 113, 183);
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 0 2px;
|
|
||||||
}
|
}
|
||||||
.text {
|
|
||||||
font-size: 14.5px;
|
.dot_box .i {
|
||||||
color: RGB(48, 113, 183);
|
display: inline-block;
|
||||||
display: inline-block;
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
|
||||||
|
background-color: RGB(48, 113, 183);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 2px;
|
||||||
}
|
}
|
||||||
.init p{
|
|
||||||
|
.text {
|
||||||
|
font-size: 14.5px;
|
||||||
|
color: RGB(48, 113, 183);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.init p {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
.init2{
|
|
||||||
|
.init2 {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
color: rgba(255, 255, 255, .5);
|
color: rgba(255, 255, 255, .5);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -176,25 +176,27 @@
|
|||||||
<div style="width: 80%;margin: auto;flex-wrap: wrap;justify-content: space-between; display: grid;
|
<div style="width: 80%;margin: auto;flex-wrap: wrap;justify-content: space-between; display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(31.33%, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(31.33%, 1fr));
|
||||||
grid-column-gap: 2%;">
|
grid-column-gap: 2%;">
|
||||||
<div style="width: auto;margin-bottom: 20px;border-radius: 10px;" v-for="item in honorList" :key="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="padding: 10% 0;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;">
|
||||||
<!-- <img src="@/assets/images/rongyu/1.png"
|
<!-- <img src="@/assets/images/rongyu/1.png"
|
||||||
style="height: 100%;object-fit: contain;margin: auto;display: block;"> -->
|
style="height: 100%;object-fit: contain;margin: auto;display: block;"> -->
|
||||||
<img :src="item.picture"
|
<!-- <img :src="item.picture"
|
||||||
style="width:100%;height: 345px; margin: auto;display: block;scale: 0.8;">
|
style="width:100%;height: 345px; margin: auto;display: block;scale: 0.85;"> -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<!-- <div
|
||||||
style="background-color: rgb(248,248,248);padding-left: 5%;padding-right: 5%; border-radius: 0 0 14px 14px ;height: 100px;overflow: hidden;">
|
style="background-color: rgb(248,248,248);padding-left: 5%;padding-right: 5%; border-radius: 0 0 14px 14px ;height: 100px;overflow: hidden;">
|
||||||
<h3 style="padding: 10px 0 0 0 ;color:rgb(108,108,118);margin: 0;">{{ item.annual }}</h3>
|
<h3 style="padding: 10px 0 0 0 ;color:rgb(108,108,118);margin: 0;">{{ item.annual }}</h3>
|
||||||
<p style="color:rgb(155,155,155)">
|
<p style="color:rgb(155,155,155)">
|
||||||
<!-- J2016P01地块建设工程(1-14号楼及联合地下
|
|
||||||
室主体),荣膺2018年度市级建筑施工安全生
|
|
||||||
产标准化优良项目。 -->
|
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div> -->
|
||||||
|
<div style="height: 100%;text-align: center; border: 5px solid #F8F8F8;">
|
||||||
|
|
||||||
|
|
||||||
|
<img :src="item.picture" alt="200603" style="scale: 0.85;height: 100%;width: 100%"> </div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div style="width: auto;margin-bottom: 20px;border-radius: 10px;">
|
<!-- <div style="width: auto;margin-bottom: 20px;border-radius: 10px;">
|
||||||
<div style="padding: 10% 0;background-color: rgb(240,246,250); border-radius: 14px 14px 0 0;">
|
<div style="padding: 10% 0;background-color: rgb(240,246,250); border-radius: 14px 14px 0 0;">
|
||||||
@ -281,11 +283,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="background-color: rgb(248,248,248);padding: 36px 42px 0; border-radius: 0 0 14px 14px ;line-height: 24px;height: 230px;">
|
style="background-color: rgb(248,248,248);padding: 36px 42px 0; border-radius: 0 0 14px 14px ;line-height: 24px;height: 230px;">
|
||||||
<h3 style="color:rgb(108,108,118);margin: 0;">企业愿景</h3>
|
<h3 style="color:rgb(108,108,118);margin: 0;">{{ culturelist[2].name }}</h3>
|
||||||
<h5>CORPORATE <br>VISION</h5>
|
<h5>{{culturelist[2].synopsis}}</h5>
|
||||||
<p style="color: rgb(169,169,169);margin: 0;font-size: 14px;">成为载誉八闽的一流建筑承包商</p>
|
<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;">用一流服务打造一流的飞阳口碑
|
</p>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 32%;margin-bottom: 20px;">
|
<div style="width: 32%;margin-bottom: 20px;">
|
||||||
@ -297,11 +298,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="background-color: rgb(248,248,248);padding: 36px 42px 0; border-radius: 0 0 14px 14px ;line-height: 24px;height: 230px;">
|
style="background-color: rgb(248,248,248);padding: 36px 42px 0; border-radius: 0 0 14px 14px ;line-height: 24px;height: 230px;">
|
||||||
<h3 style="color:rgb(108,108,118);margin: 0;">企业使命</h3>
|
<h3 style="color:rgb(108,108,118);margin: 0;">{{ culturelist[1].name }}</h3>
|
||||||
<h5>CORPORATE <br>MISSION</h5>
|
<h5>{{culturelist[1].synopsis}}</h5>
|
||||||
<p style="color: rgb(169,169,169);margin: 0;font-size: 14px;">不断提升管理和服务能力</p>
|
<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;">为客户创造价值
|
</p>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 32%;margin-bottom: 20px;">
|
<div style="width: 32%;margin-bottom: 20px;">
|
||||||
@ -313,13 +313,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="background-color: rgb(248,248,248);padding: 36px 42px 0; border-radius: 0 0 14px 14px ;line-height: 24px;height: 230px;">
|
style="background-color: rgb(248,248,248);padding: 36px 42px 0; border-radius: 0 0 14px 14px ;line-height: 24px;height: 230px;">
|
||||||
<h3 style="color:rgb(108,108,118);margin: 0;">核心价值观</h3>
|
<h3 style="color:rgb(108,108,118);margin: 0;">{{ culturelist[0].name }}</h3>
|
||||||
<h5>CORPORATE <br>VALUES</h5>
|
<h5>{{culturelist[0].synopsis}}</h5>
|
||||||
<p style="color: rgb(169,169,169);margin: 0;font-size: 14px;">敢言道正 树立榜样 尊重他人 客观持平 贵乎自知
|
<p style="color: rgb(169,169,169);margin: 0;font-size: 14px;" v-html="culturelist[0].content">
|
||||||
</p>
|
</p>
|
||||||
<p style="color: rgb(169,169,169);margin: 0;font-size: 14px;">承担责任 透明公开 诚恳可靠 正直不阿
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -332,14 +332,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { honor } from '@/api';
|
import { honor,culture } from '@/api';
|
||||||
import { honorList } from '@/api';
|
import { honorList } from '@/api';
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeName: 'first',
|
activeName: 'first',
|
||||||
timeIndex: 6,
|
timeIndex: 0,
|
||||||
timeLineList: [{
|
timeLineList:
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"timestamp": "全部",
|
||||||
|
"color": "#999",
|
||||||
|
"fontsize": 18,
|
||||||
|
"year": "all",
|
||||||
|
"bgcolor": "#e4e7ed",
|
||||||
|
|
||||||
|
},{
|
||||||
"timestamp": "2024年",
|
"timestamp": "2024年",
|
||||||
"color": "#999",
|
"color": "#999",
|
||||||
"fontsize": 18,
|
"fontsize": 18,
|
||||||
@ -408,19 +417,27 @@ export default {
|
|||||||
"year": "2017",
|
"year": "2017",
|
||||||
"info": "chengli"
|
"info": "chengli"
|
||||||
}],
|
}],
|
||||||
honorList:[]
|
honorList:[],
|
||||||
|
culturelist:[]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
// honor({'year':'2019'}).then((res)=>{
|
// honor({'year':'2019'}).then((res)=>{
|
||||||
// console.log(res)
|
// console.log(res)
|
||||||
// })
|
// })
|
||||||
this.getHonner('2018')
|
|
||||||
|
if(this.$route.query.category){
|
||||||
|
this.activeName='second'
|
||||||
|
}
|
||||||
|
this.getHonner('all')
|
||||||
|
culture().then((res)=>{
|
||||||
|
this.culturelist=res.data
|
||||||
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
async getHonner(year){
|
async getHonner(year){
|
||||||
console.log(year)
|
|
||||||
|
|
||||||
const {data:res} = await honorList({'year':year});
|
const {data:res} = await honorList({'year':year});
|
||||||
console.log(res)
|
console.log(res)
|
||||||
@ -465,6 +482,11 @@ export default {
|
|||||||
console.log(year)
|
console.log(year)
|
||||||
this.getHonner(year)
|
this.getHonner(year)
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
changeto(id){
|
||||||
|
this.$router.push({
|
||||||
|
path: '/honordetail?id=' + id
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -840,5 +862,6 @@ h5 {
|
|||||||
letter-spacing: -1px;
|
letter-spacing: -1px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
width:203px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
207
src/views/honordetail.vue
Normal file
207
src/views/honordetail.vue
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="page_ban">
|
||||||
|
<div class="img compbg"></div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="page_nav">
|
||||||
|
<div class="name">
|
||||||
|
<a style="padding: 0;" href="">荣誉资讯</a> <a href="javascript:;">荣誉详情</a>
|
||||||
|
</div>
|
||||||
|
<div class="list" style="bottom:-15px">
|
||||||
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||||
|
<el-tab-pane label="荣誉详情" name="first"></el-tab-pane>
|
||||||
|
|
||||||
|
</el-tabs>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="Wrapper news_d">
|
||||||
|
<div class="content" style="text-align: center;">
|
||||||
|
<div class="name">{{ name }}</div>
|
||||||
|
<div class="top-box"> <div class="date">{{time}}</div> </div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div v-html="content"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="con">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { honordetail } from '@/api';
|
||||||
|
export default{
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
name:'',
|
||||||
|
content:'',
|
||||||
|
time:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
honordetail(this.$route.query).then((res)=>{
|
||||||
|
this.content=res.data.content
|
||||||
|
this.name=res.data.name
|
||||||
|
this.time=res.data.createTime
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background-color: #0059a7;
|
||||||
|
position: static;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #0007a9;
|
||||||
|
color: rgba(0, 7, 169, .8);
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
.news_d {
|
||||||
|
padding: 60px 0 90px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.Wrapper {
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.news_d .name {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #0007a9;
|
||||||
|
color: rgba(0, 7, 169, .8);
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs__item {
|
||||||
|
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs__nav-wrap::after {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.news_d .con p {
|
||||||
|
font-size: 14.5px;
|
||||||
|
color: #8e8e95;
|
||||||
|
line-height: 26px;
|
||||||
|
margin-bottom: 26px;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.compbg {
|
||||||
|
background-image: url('../assets/images/banner.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_ban {
|
||||||
|
height: 404px;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 101;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_ban .img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
background-size: cover;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.top-box{
|
||||||
|
margin: 16px 0 30px;
|
||||||
|
}
|
||||||
|
.date{
|
||||||
|
|
||||||
|
font-size: 26px;
|
||||||
|
color: #dfd4c3;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
bottom: 20px;
|
||||||
|
padding: 0 30px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.page_ban .content {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
div,
|
||||||
|
li {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav .name {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav .list {
|
||||||
|
position: relative;
|
||||||
|
float: right;
|
||||||
|
margin-right: -35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav a {
|
||||||
|
float: left;
|
||||||
|
line-height: 76px;
|
||||||
|
position: relative;
|
||||||
|
font-size: 14.5px;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav .name a {
|
||||||
|
padding-left: 30px;
|
||||||
|
/* background: url() no-repeat left 30px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav .list {
|
||||||
|
position: relative;
|
||||||
|
float: right;
|
||||||
|
margin-right: -35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav .list a {
|
||||||
|
color: #e7dfd2;
|
||||||
|
color: rgba(231, 223, 210, .7);
|
||||||
|
margin-right: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav a {
|
||||||
|
float: left;
|
||||||
|
line-height: 76px;
|
||||||
|
position: relative;
|
||||||
|
font-size: 14.5px;
|
||||||
|
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -26,7 +26,7 @@
|
|||||||
<div class="date">{{item.releaseTime}}</div>
|
<div class="date">{{item.releaseTime}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="news_li_con"><div class="title">{{item.name}}</div> <div class="introduction" >{{ item.source }}</div> <div class="more">more...</div> </div>
|
<div class="news_li_con"><div class="title">{{item.name}}</div> <div class="introduction" >{{ item.source }}</div> </div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
@ -61,12 +61,27 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="width: 80%;margin: auto;">
|
<div style="width: 80%;margin: auto;">
|
||||||
<div v-for="item in rest" class="newsitem" style="overflow: hidden; padding: 30px 0 24px;position: relative;cursor: pointer;" @click="changeto(item.id)">
|
<div v-for="item in rest" class="newsitem" style="overflow: hidden; padding: 30px 0 24px;position: relative;cursor: pointer;display: flex;" @click="changeto(item.id)">
|
||||||
<div class="date1" style="width: 12%;">{{item.releaseTime}}</div>
|
<div class="date1" style=""><img :src="item.pic" style="width: 236px;height: 157px;"></img></div>
|
||||||
<div class="" style=" float: left;
|
<div class="" style=" width: 65%;margin-left: 35px;">
|
||||||
width: 88%;"> <div class="title1">{{item.name}}
|
<div style=" font-size: 18px;
|
||||||
</div> <div class="introduction1">{{item.source}}
|
color: #000;
|
||||||
</div></div>
|
font-weight: bold;
|
||||||
|
margin-top: 15px;">
|
||||||
|
{{item.name}}
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 14px;
|
||||||
|
margin-top: 7px;
|
||||||
|
color: #ababab;">
|
||||||
|
{{item.releaseTime}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
margin-top: 10px;">
|
||||||
|
{{item.source}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 40px;"></div>
|
<div style="height: 40px;"></div>
|
||||||
<div class="page_more wow fadeInUp animated" data-wow-delay=".2s" id="More" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;" @click="addnews">
|
<div class="page_more wow fadeInUp animated" data-wow-delay=".2s" id="More" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;" @click="addnews">
|
||||||
@ -298,7 +313,7 @@ float: none;
|
|||||||
.news_li_con {
|
.news_li_con {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 28px;
|
padding-left: 28px;
|
||||||
height: 200px;
|
height: 150px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.news_li_con:before {
|
.news_li_con:before {
|
||||||
@ -363,7 +378,7 @@ div{
|
|||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.newsitem .date1{
|
.newsitem .date1{
|
||||||
width: 128px;
|
width: 236px;
|
||||||
float: left;
|
float: left;
|
||||||
font-family: 'Rajdhani';
|
font-family: 'Rajdhani';
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
|
|||||||
@ -21,10 +21,13 @@
|
|||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</div>
|
</div>
|
||||||
<div class="content2" style="width: 80%;margin: auto;display: flex;justify-content: space-between;flex-wrap: wrap;">
|
<div class="content2" style="width: 80%;margin: auto;display: flex;justify-content: space-between;flex-wrap: wrap;">
|
||||||
<div v-for="item in PrijectList" style="width: 32%;border-radius: 15px 15px 0 0 ;background-color: rgb(245,245,245);margin-bottom: 2%;">
|
<div v-for="item in PrijectList" style="width: 32%;border-radius: 15px 15px 0 0 ;margin-bottom: 2%; border-bottom: 1px solid #D9D9D9;cursor: pointer;" @click="changeto(item.id)">
|
||||||
<img :src="item.picture" style="width: 100%;border-radius: 15px 15px 0 0 ;">
|
|
||||||
<div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
|
<img :src="item.picture" style="width: 100%;border-radius: 15px ;">
|
||||||
<p>{{item.name}}</p><p class="project-font" @click="changeto(item.id)" style="cursor: pointer;" >MORE...</p>
|
<div style="padding: 2px 20px;justify-content: space-between;">
|
||||||
|
<!-- <p>{{item.name}}</p><p class="project-font" @click="changeto(item.id)" style="cursor: pointer;" >MORE...</p> -->
|
||||||
|
<span class="cpbt"> <b class="l">{{item.name}} </b> <i class="r">></i> </span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
|
<!-- <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
|
||||||
@ -307,5 +310,33 @@ li {
|
|||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
.cpbt {
|
||||||
|
display: block;
|
||||||
|
height: 71px;
|
||||||
|
line-height: 71px;
|
||||||
|
|
||||||
|
}
|
||||||
|
b {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.l {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
b, strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
|
font-family: 宋体;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.r {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="page_ban">
|
<div class="page_ban">
|
||||||
<div class="img compbg"></div>
|
<div class="img compbg"></div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
@ -18,6 +18,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="Wrapper news_d">
|
<div class="Wrapper news_d">
|
||||||
|
<div style="display: flex;width: 95%;justify-content: space-between;">
|
||||||
|
<div style="width: 30%;background-color:rgb(228,235,241);">
|
||||||
|
<div style="width: 100%;padding-left: 30%;box-sizing: border-box;">
|
||||||
|
<div class="z_xq_cont_top_lt">工程简介</div>
|
||||||
|
<div class="z_xq_cont_top_ls"></div>
|
||||||
|
<div class="z_xq_cont_top_lc"><img src="https://www.fygroup.cn//skin/images/xqjt.png"></div>
|
||||||
|
<div class="z_xq_cont_top_lx">
|
||||||
|
<div class="jzmssj">{{area}} <span class="dwi">㎡</span></div>
|
||||||
|
<div class="jzmsms">工程建筑面积</div>
|
||||||
|
</div>
|
||||||
|
<div class="z_xq_cont_top_lx">
|
||||||
|
<div class="jzmssj">{{ height }} <span class="dwi">M</span></div>
|
||||||
|
<div class="jzmsms">建筑高度</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 70%;">
|
||||||
<div class="content" style="text-align: center;">
|
<div class="content" style="text-align: center;">
|
||||||
<div class="name">{{ name }}</div>
|
<div class="name">{{ name }}</div>
|
||||||
<div class="top-box"> <div class="date">{{time}}</div> </div>
|
<div class="top-box"> <div class="date">{{time}}</div> </div>
|
||||||
@ -25,13 +42,13 @@
|
|||||||
<div v-html="content"></div>
|
<div v-html="content"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="con">
|
<div class="con">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { projectdetail } from '@/api';
|
import { projectdetail } from '@/api';
|
||||||
@ -40,7 +57,9 @@ export default{
|
|||||||
return{
|
return{
|
||||||
name:'',
|
name:'',
|
||||||
content:'',
|
content:'',
|
||||||
time:''
|
time:'',
|
||||||
|
area:'',
|
||||||
|
height:''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
@ -51,6 +70,8 @@ export default{
|
|||||||
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.height=res.data.height
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@ -142,7 +163,7 @@ background-color: transparent;
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
width: 80%;
|
width: 86%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -204,4 +225,40 @@ 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 {
|
||||||
|
font-size: 25px;
|
||||||
|
color: #000000;
|
||||||
|
margin-top: 55px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.z_xq_cont_top_ls {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #263d8f;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.z_xq_cont_top_lc {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.z_xq_cont_top_lc img {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.z_xq_cont_top_lx {
|
||||||
|
height: 88px;
|
||||||
|
border-left: 1px solid #CCCCCC;
|
||||||
|
padding-left: 10px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
.z_xq_cont_top_lx .jzmssj {
|
||||||
|
font-size: 46px;
|
||||||
|
color: #263d8f;
|
||||||
|
font-weight: 100;
|
||||||
|
line-height: 52px;
|
||||||
|
}
|
||||||
|
.z_xq_cont_top_lx .jzmssj .dwi {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user