更新首页
This commit is contained in:
parent
6e2e4592dd
commit
eaeae3f207
|
|
@ -7,22 +7,8 @@ export {}
|
|||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,272 +1,196 @@
|
|||
<script setup lang="ts">
|
||||
import EquipCard from '@/compontents/equipCard.vue'
|
||||
import Navmenu from '@/compontents/Navmenu/index.vue'
|
||||
import EquipCard from '@/compontents/equipCard.vue'
|
||||
import Navmenu from '@/compontents/Navmenu/index.vue'
|
||||
|
||||
const leftNavList = [
|
||||
{
|
||||
name: '全部商品',
|
||||
children: [
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
{ goodsName: '履带挖掘机' },
|
||||
{ goodsName: '履带挖掘机' },
|
||||
{ goodsName: '履带挖掘机' },
|
||||
{ goodsName: '履带挖掘机' },
|
||||
{ goodsName: '履带挖掘机' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '挖掘机',
|
||||
children: [
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '土方机械',
|
||||
children: [
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '工程起重机械',
|
||||
children: [
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '动力设备',
|
||||
children: [
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '压实机械',
|
||||
children: [
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '路桥机械',
|
||||
children: [
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '混凝土机械',
|
||||
children: [
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '桩工机械',
|
||||
children: [
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [{ goodsName: '履带挖掘机' }]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const leftNavList = [
|
||||
{
|
||||
name: '全部商品', children: [
|
||||
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
{ goodsName: '履带挖掘机' },
|
||||
{ goodsName: '履带挖掘机' },
|
||||
{ goodsName: '履带挖掘机' },
|
||||
{ goodsName: '履带挖掘机' },
|
||||
{ goodsName: '履带挖掘机' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '挖掘机', children: [
|
||||
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '土方机械', children: [
|
||||
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '工程起重机械', children: [
|
||||
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '动力设备', children: [
|
||||
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '压实机械', children: [
|
||||
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '路桥机械', children: [
|
||||
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '混凝土机械', children: [
|
||||
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '桩工机械', children: [
|
||||
|
||||
{
|
||||
title: '挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '开沟机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '斗轮挖掘机',
|
||||
children: [
|
||||
{ goodsName: '履带挖掘机' },
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
const handlerGoodsDetails = () => {
|
||||
console.log('去往商品详情页');
|
||||
|
||||
}
|
||||
const handlerGoodsDetails = () => {
|
||||
console.log('去往商品详情页')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="home-index-banner">
|
||||
<div class="home-index ">
|
||||
<div class="home-index">
|
||||
<!-- 商品菜单导航以及轮播图区域 -->
|
||||
<div class="home-goods">
|
||||
<ul class="left-nav">
|
||||
|
||||
<!-- 左侧机械名称菜单按钮 -->
|
||||
<li class="item-nav" v-for="item in leftNavList" :key="item.name">{{ item.name }}
|
||||
<li class="item-nav" v-for="item in leftNavList" :key="item.name">
|
||||
{{ item.name }}
|
||||
<ul class="sub-goods">
|
||||
<!-- 级联框内 类别名称 -->
|
||||
<li v-for="child in item.children" :key="child.title">
|
||||
<span>{{ child.title }}</span>
|
||||
<span>
|
||||
<!-- 小类名称 -->
|
||||
<a v-for="son in child.children" :key="son.goodsName" @click="handlerGoodsDetails">{{
|
||||
son.goodsName }}</a>
|
||||
<a
|
||||
v-for="son in child.children"
|
||||
:key="son.goodsName"
|
||||
@click="handlerGoodsDetails">
|
||||
{{ son.goodsName }}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -310,7 +234,6 @@ const handlerGoodsDetails = () => {
|
|||
<a></a>
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="consult-nav">
|
||||
<li>
|
||||
<a>资讯</a>
|
||||
|
|
@ -326,7 +249,6 @@ const handlerGoodsDetails = () => {
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="consult-content">
|
||||
<!-- 左侧背景图片 -->
|
||||
<div class="left-bg"></div>
|
||||
|
|
@ -365,228 +287,213 @@ const handlerGoodsDetails = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.home-index-banner {
|
||||
background-color: #fff;
|
||||
padding: 20px 15px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.home-index-banner {
|
||||
background-color: #fff;
|
||||
padding: 20px 15px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-index {
|
||||
|
||||
|
||||
|
||||
.home-goods {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
|
||||
|
||||
.left-nav {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
.home-index {
|
||||
.home-goods {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
background-color: #f7f9fa;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.item-nav {
|
||||
text-align: left;
|
||||
padding-left: 50px;
|
||||
color: #8B8B8B;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #2282FF;
|
||||
font-weight: bold;
|
||||
background-color: #1abc9c;
|
||||
|
||||
.sub-goods {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sub-goods {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 200px;
|
||||
width: 500px;
|
||||
.left-nav {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background-color: #f5f4f4;
|
||||
z-index: 999;
|
||||
opacity: 0.9;
|
||||
display: flex;
|
||||
background-color: #f7f9fa;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
li {
|
||||
margin: 15px 0;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
.item-nav {
|
||||
text-align: left;
|
||||
padding-left: 50px;
|
||||
color: #8b8b8b;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
|
||||
span:first-child {
|
||||
width: 160px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #2282ff;
|
||||
font-weight: bold;
|
||||
background-color: #1abc9c;
|
||||
|
||||
.sub-goods {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
span a {
|
||||
margin: 0 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sub-goods {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 200px;
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
background-color: #f5f4f4;
|
||||
z-index: 999;
|
||||
opacity: 0.9;
|
||||
|
||||
li {
|
||||
margin: 15px 0;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
|
||||
span:first-child {
|
||||
width: 160px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
span a {
|
||||
margin: 0 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
.right-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
|
||||
.swpier-img {
|
||||
width: 100%;
|
||||
height: 437px;
|
||||
margin-top: 10px;
|
||||
border-radius: 8px;
|
||||
|
||||
.el-carousel {
|
||||
.swpier-img {
|
||||
width: 100%;
|
||||
height: 437px;
|
||||
}
|
||||
margin-top: 10px;
|
||||
border-radius: 8px;
|
||||
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
opacity: 0.75;
|
||||
line-height: 300px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.el-carousel {
|
||||
height: 437px;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
opacity: 0.75;
|
||||
line-height: 300px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hot-equip {
|
||||
margin-top: 30px;
|
||||
height: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
span {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hot-equip {
|
||||
margin-top: 30px;
|
||||
height: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #9D9D9D;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.equip-pic {
|
||||
height: 160px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
width: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
.consult-nav {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 0 15px;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid #2282FF;
|
||||
a {
|
||||
color: #9d9d9d;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.consult-content {
|
||||
margin-top: 20px;
|
||||
height: 210px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.equip-pic {
|
||||
height: 160px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left-bg {
|
||||
background: url(../../assets/img/home/2023_12_01_beijing2/left_bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
width: 340px;
|
||||
height: 210px;
|
||||
li {
|
||||
width: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-consult {
|
||||
height: 210px;
|
||||
flex: 1;
|
||||
padding-left: 35px;
|
||||
.consult-nav {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
|
||||
.consult-box {
|
||||
height: 70px;
|
||||
li {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 0 15px;
|
||||
|
||||
.consult-title {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: #827D7D;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.consult-info {
|
||||
width: calc(100% - 100px);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px dashed #979797;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
&:hover {
|
||||
border-bottom: 1px solid #2282ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.consult-content {
|
||||
margin-top: 20px;
|
||||
height: 210px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left-bg {
|
||||
background: url(../../assets/img/home/2023_12_01_beijing2/left_bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
width: 340px;
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
.right-consult {
|
||||
height: 210px;
|
||||
flex: 1;
|
||||
padding-left: 35px;
|
||||
|
||||
.consult-box {
|
||||
height: 70px;
|
||||
|
||||
.consult-title {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #827d7d;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.consult-info {
|
||||
width: calc(100% - 100px);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px dashed #979797;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue