Extensive_Web/src/views/front/services/index.vue

138 lines
2.6 KiB
Vue

<template>
<div class="services">
<div class="banner"></div>
<div class="content">
<h1>{{ $t('service.menuName') }}</h1>
<p>{{ $t('service.msg1') }}</p>
<ul class="sList cf">
<li class="oddLevel">
<a href="/services/centralizedImagingServices">
<img
src="@/static/images/zhizhun.png"
alt=""
/>
<span>
<s>{{ $t('service.subMenu1') }}</s>
</span>
</a>
</li>
<li class="oddLevel">
<a href="/services/3DPostProcessingServices">
<img
src="@/static/images/facate1.jpg"
alt=""
/>
<span>
<s>{{ $t('service.subMenu2') }}</s>
</span>
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'serices',
data () {
return {
}
},
methods: {
},
mounted () {}
}
</script>
<style scoped lang="scss">
.services {
background: #fff;
.banner {
height: 300px;
background: url(../../../../src/static/images/bannerSolutions.jpg) no-repeat center center;
background-size: cover;
position: relative;
overflow: hidden;
clear: both;
}
.content {
width: 926px;
margin: 0 auto;
padding-top: 70px;
padding-bottom: 73px;
h1 {
font-size: 34px;
line-height: 34px;
color: #333333;
padding-left: 14px;
border-left: 6px solid #1083b6;
height: 34px;
margin-bottom: 40px;
font-weight: normal;
}
p {
font-size: 16px;
line-height: 31px;
color: #2f2f2f;
padding-bottom: 50px;
}
ol, ul {
list-style: none;
}
.cf {
zoom: 1;
}
.cf:before, .cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.sList {
li {
float: left;
width: 49%;
padding: 30px 0;
border-right: 2px solid #eee;
a {
display: block;
width: 100%;
height: 100%;
}
a:visited {
color: #333;
}
img {
display: block;
margin: 0 auto;
width: 79%;
height: 225px;
}
span {
display: block;
font-size: 18px;
color: #1678b4;
text-align: center;
padding: 20px 0 0 0;
}
span * {
display: inline-block;
}
s {
text-decoration: none;
}
}
li.oddLevel {
border-bottom: 2px solid #eee;
}
}
}
}
</style>