526 lines
12 KiB
Vue
526 lines
12 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="top" :style="'padding-top:' + top + 'px'"></view>
|
|
<view class="logo">
|
|
<view class="img">
|
|
<image src="@/static/image/logo.png" mode=""></image>
|
|
</view>
|
|
<image class="avatar" src="@/static/image/default-avatar.svg" mode="" @click="goTo(6)"></image>
|
|
</view>
|
|
<view class="navigation">
|
|
<view class="title">功能导航</view>
|
|
<view class="function">
|
|
<view @click="goTo(1)">
|
|
<view class="iconbox">
|
|
<image class="icon1" src="@/static/image/icon-Group4529.svg" mode=""></image>
|
|
<text class="iconfont icon-Vector-2"></text>
|
|
</view>
|
|
<text class="text">公司介绍</text>
|
|
</view>
|
|
<view @click="goTo(4)">
|
|
<view class="iconbox">
|
|
<image class="icon1" src="@/static/image/icon-Group4530.svg" mode=""></image>
|
|
<view class="iconfont icon-Vector-2"></view>
|
|
</view>
|
|
<text class="text">公司案例</text>
|
|
</view>
|
|
<view>
|
|
<view class="iconbox">
|
|
<image class="icon1" src="@/static/image/icon-Group4531.svg" mode=""></image>
|
|
<view class="iconfont icon-Vector-2"></view>
|
|
</view>
|
|
<text class="text">商务合作</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="clients">
|
|
<view class="title">
|
|
<view>合作客户</view>
|
|
<image class="more" src="@/static/image/more.svg" mode=""></image>
|
|
</view>
|
|
<view class="companies">
|
|
<scroll-view :show-scrollbar="false" class="scroll-view_H" scroll-x="true">
|
|
<view class="company">
|
|
<image
|
|
src="https://img2.baidu.com/it/u=419111865,3225914506&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
|
|
mode=""></image>
|
|
<view class="introduce">
|
|
<image src="@/static/image/default-avatar.svg" mode=""></image>
|
|
<view class="company-name">XXX律师事务所</view>
|
|
</view>
|
|
</view>
|
|
<view class="company">
|
|
<image
|
|
src="https://img2.baidu.com/it/u=419111865,3225914506&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
|
|
mode=""></image>
|
|
<view class="introduce">
|
|
<image src="@/static/image/default-avatar.svg" mode=""></image>
|
|
<view class="company-name">XXX律师事务所</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="information">
|
|
<view class="title" @click="goTo(2)">
|
|
<view>企业资讯</view>
|
|
<image class="more" src="@/static/image/more.svg" mode=""></image>
|
|
</view>
|
|
<view class="news" @click="goTo(3)">
|
|
<image src="https://mms2.baidu.com/it/u=3529567955,935711200&fm=253&app=120&f=JPEGw=640&h=429" mode="">
|
|
</image>
|
|
<view class="news-box">
|
|
<view class="news-title">企业资讯标题标题标额...企业资讯标标题标题标额</view>
|
|
<view class="iconfont icon-arrow-up-1--arrow-up-keyboard"></view>
|
|
</view>
|
|
</view>
|
|
<view class="news" @click="goTo(3)">
|
|
<view class="news-box">
|
|
<view class="news-title">企业资讯标题标题标额...企业资讯标标题标题标额</view>
|
|
<view class="iconfont icon-arrow-up-1--arrow-up-keyboard"></view>
|
|
</view>
|
|
<image src="https://mms0.baidu.com/it/u=392427122,2979071926&fm=253&app=138&f=JPEGw=759&h=459" mode="">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="case">
|
|
<view class="title" @click="goTo(4)">
|
|
<view>案例库</view>
|
|
<image class="more" src="@/static/image/more.svg" mode=""></image>
|
|
</view>
|
|
<view>
|
|
<scroll-view :show-scrollbar="false" class="screen" scroll-x="true">
|
|
<view :class="select==index?'item active':'item'" v-for="(item,index) in navList" :key="item.text"
|
|
@click="sel(index)">
|
|
<view v-if="item.text == 'logo设计'" style="position: relative;padding-left: 32rpx;">
|
|
<image :src="select==index?'../../static/image/VectorStroke-1.svg':'../../static/image/VectorStroke.svg'" mode="" style="position: absolute; left: 0;"></image>
|
|
<text style="margin-left: 9rpx;">{{item.text}}</text>
|
|
</view>
|
|
<view v-else>
|
|
<text :class="item.name"></text>
|
|
<text style="margin-left: 9rpx;">{{item.text}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="product">
|
|
<view class="product-item" @click="goTo(5)">
|
|
<image
|
|
src="https://img2.baidu.com/it/u=419111865,3225914506&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
|
|
mode=""></image>
|
|
<view>
|
|
<text class="bg-blue">开发</text>
|
|
<text>xxxx小程序</text>
|
|
</view>
|
|
</view>
|
|
<view class="product-item">
|
|
<image
|
|
src="https://img2.baidu.com/it/u=3625112638,614874177&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
|
|
mode=""></image>
|
|
<view>
|
|
<text class="bg-blue">开发</text>
|
|
<text>xxxx小程序</text>
|
|
</view>
|
|
</view>
|
|
<view class="product-item">
|
|
<image src="http://t14.baidu.com/it/u=3416681815,520803445&fm=224&app=112&f=JPEG?w=500&h=500"
|
|
mode=""></image>
|
|
<view>
|
|
<text class="bg-green">设计</text>
|
|
<text>xxxx小程序</text>
|
|
</view>
|
|
</view>
|
|
<view class="product-item">
|
|
<image
|
|
src="https://img0.baidu.com/it/u=745259874,3861833027&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=510"
|
|
mode=""></image>
|
|
<view>
|
|
<text class="bg-blue">开发</text>
|
|
<text>xxxx小程序</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<bottoms></bottoms>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
top: 0,
|
|
navList: [{
|
|
text: '全部',
|
|
name: 'iconfont icon-dashboard-3--app-application-dashboard-home-layout-vertical'
|
|
}, {
|
|
text: '系统开发',
|
|
name: 'iconfont icon-Vector-14'
|
|
}, {
|
|
text: 'APP',
|
|
name: 'iconfont icon-Vector-1-2'
|
|
},
|
|
{
|
|
text: '小程序',
|
|
name: 'iconfont icon-Vector-2-1'
|
|
}, {
|
|
text: '3D建模',
|
|
name: 'iconfont icon-Vector-3-1'
|
|
},
|
|
{
|
|
text: '网站',
|
|
name: 'iconfont icon-Vector-5-2'
|
|
}, {
|
|
text: 'logo设计',
|
|
name: 'iconfont icon-Vector-3-1'
|
|
},
|
|
{
|
|
text: '识别设计',
|
|
name: 'iconfont icon-Vector-8'
|
|
}, {
|
|
text: '包装设计',
|
|
name: 'iconfont icon-Vector-7'
|
|
},
|
|
{
|
|
text: '宣传品设计',
|
|
name: 'iconfont icon-Vector-6'
|
|
}, {
|
|
text: 'UI设计',
|
|
name: 'iconfont icon-Vector-5'
|
|
},
|
|
{
|
|
text: '动漫游戏设计',
|
|
name: 'iconfont icon-Group4525'
|
|
}, {
|
|
text: '视频拍摄',
|
|
name: 'iconfont icon-VectorStroke-1'
|
|
},
|
|
{
|
|
text: '照片拍摄',
|
|
name: 'iconfont icon-Vector-9'
|
|
},
|
|
],
|
|
select: 0
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.top = uni.getMenuButtonBoundingClientRect().top;
|
|
},
|
|
methods: {
|
|
sel(i) {
|
|
this.select = i;
|
|
},
|
|
goTo(i) {
|
|
switch (i) {
|
|
case 1:
|
|
uni.navigateTo({
|
|
url: '/pages/companyProfile/companyProfile'
|
|
})
|
|
break;
|
|
case 2:
|
|
uni.navigateTo({
|
|
url: '/pages/companyInformation/companyInformation'
|
|
})
|
|
break;
|
|
case 3:
|
|
uni.navigateTo({
|
|
url: '/pages/infoDetail/infoDetail'
|
|
})
|
|
break;
|
|
case 4:
|
|
uni.navigateTo({
|
|
url: '/pages/caseSelect/caseSelect'
|
|
})
|
|
break;
|
|
case 5:
|
|
uni.navigateTo({
|
|
url: '/pages/caseDetail/caseDetail'
|
|
})
|
|
break;
|
|
case 6:
|
|
uni.navigateTo({
|
|
url: '/pages/my/my'
|
|
})
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
padding-left: 30rpx;
|
|
padding-bottom: 48rpx;
|
|
}
|
|
|
|
.logo {
|
|
margin-top: 67rpx;
|
|
padding-right: 28rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.img {
|
|
width: 398rpx;
|
|
height: 119rpx;
|
|
|
|
image {
|
|
width: 398rpx;
|
|
height: 119rpx;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
color: #2A3A72;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 45rpx;
|
|
}
|
|
|
|
.clients .title,
|
|
.information .title,
|
|
.case .title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-right: 30rpx;
|
|
|
|
.more {
|
|
width: 78rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.clients .title {
|
|
margin-bottom: 14rpx;
|
|
}
|
|
|
|
.navigation {
|
|
margin-top: 92rpx;
|
|
padding-right: 30rpx;
|
|
|
|
.function {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
>view {
|
|
width: 216rpx;
|
|
height: 162rpx;
|
|
border-radius: 40rpx;
|
|
box-shadow: 0 0 30rpx 4rpx #7a98c61a;
|
|
box-sizing: border-box;
|
|
padding: 14rpx 22rpx 0;
|
|
|
|
.text {
|
|
color: #2A3A72;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.iconbox {
|
|
height: 82rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
|
|
.icon1 {
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.icon-Vector-2 {
|
|
color: #7781a4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.clients {
|
|
margin-top: 114rpx;
|
|
|
|
.companies {
|
|
display: flex;
|
|
|
|
.scroll-view_H {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.company {
|
|
border-radius: 40rpx;
|
|
box-shadow: 0 4rpx 32rpx 4rpx #b2c6e340;
|
|
padding: 22rpx 20rpx;
|
|
display: inline-block;
|
|
margin: 30rpx;
|
|
margin-left: 0;
|
|
|
|
>image {
|
|
width: 459rpx;
|
|
height: 387rpx;
|
|
border-radius: 30rpx;
|
|
}
|
|
}
|
|
|
|
.introduce {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 25rpx;
|
|
|
|
image {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.company-name {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #2A3A72;
|
|
margin-left: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.information {
|
|
margin-top: 86rpx;
|
|
padding-right: 30rpx;
|
|
|
|
.title {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.news {
|
|
border-radius: 40rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
margin-top: 37rpx;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
image {
|
|
width: 345rpx;
|
|
height: 216rpx;
|
|
}
|
|
|
|
.news-box {
|
|
flex: 1;
|
|
background-color: #F6FAFB;
|
|
padding: 50rpx 40rpx 27rpx 27rpx;
|
|
|
|
.news-title {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.icon-arrow-up-1--arrow-up-keyboard {
|
|
text-align: right;
|
|
color: #3887FD;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.case {
|
|
margin-top: 142rpx;
|
|
|
|
.screen {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
margin-bottom: 39rpx;
|
|
}
|
|
|
|
.item {
|
|
display: inline-block;
|
|
border-radius: 50rpx;
|
|
padding: 15rpx 35rpx;
|
|
color: #2A3A72;
|
|
font-size: 22rpx;
|
|
image{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.item.active {
|
|
background-color: #7F89AC;
|
|
color: #fff;
|
|
}
|
|
|
|
.product {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-right: 30rpx;
|
|
|
|
.product-item {
|
|
width: 332rpx;
|
|
margin-right: 26rpx;
|
|
margin-bottom: 45rpx;
|
|
|
|
&:nth-child(2n) {
|
|
margin-top: 48rpx;
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
image {
|
|
width: 332rpx;
|
|
height: 280rpx;
|
|
border-radius: 40rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
view {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
text {
|
|
&:first-child {
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
padding: 5rpx;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-left: 11rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.bg-blue {
|
|
color: #3887FD;
|
|
background-color: #EEF1FF;
|
|
}
|
|
|
|
.bg-green {
|
|
color: #6FCC26;
|
|
background-color: #EEFEE7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|