|
- <template>
- <div>
- <div id="top" />
- <div id="hot">
- <div class="content">
- <div class="top">
- <div class="js">
- <a class="title">关于我们</a>
- <a class="jcontent">{{ aboutwe.content }}</a>
- </div>
- <img :src="aboutwe.img">
- </div>
- <div class="bottom"/>
- </div>
- </div>
- <div id="daliay">
- <div class="content">
- <div class="top">
- <div class="htitle">
- <a>成员介绍</a>
- </div>
- <div id="hotList">
- <div class="list" v-for="(item, index) in ldList" :key="index">
- <img :src="item.img">
- <a class="name">{{ item.name }}</a>
- <a class="title">{{ item.title }}</a>
- <a class="content">{{ item.content }}</a>
- </div>
- </div>
- </div>
- <div class="bottom"/>
- </div>
- </div>
- <div class="swhz">
- <div class="content">
- <div class="callme">
- <a class="title">商务合作</a>
- <div>
- <a>联系方式: 458233656411</a>
- <a>联系邮箱: 458233656411@Gmail.com</a>
- </div>
- </div>
- <img src="../../assets/aboutbottom.png">
- </div>
- </div>
- <!-- <div id="wk">
- <div class="content">
- <div class="callme">
- <a class="title">商务合作</a>
- <div>
- <a>联系方式: 458233656411</a>
- <a>联系邮箱: 458233656411@Gmail.com</a>
- </div>
- </div>
- <img src="../../assets/aboutbottom.png">
- </div>
- </div> -->
- </div>
- </template>
- <script>
- import { aboutUs, memberList } from '@/api/about.js'
- export default {
- name: 'about',
- data () {
- return {
- aboutwe: {
- content: '',
- img: ''
- },
- ldList: [
- {
- img: '/ld.png',
- name: '张磊',
- title: 'CEO',
- content: '还推出了一系列的互联网服务和产品,包括在线地图、音乐和视频等。百度的出现为人们提供了更便利的信息搜索'
- }, {
- img: '/ld.png',
- name: '周明希',
- title: 'AI',
- content: '还推出了一系列的互联网服务和产品,包括在线地图、音乐和视频等。百度的出现为人们提供了更便利的信息搜索'
- }, {
- img: '/ld.png',
- name: '周明希',
- title: 'AI',
- content: '还推出了一系列的互联网服务和产品,包括在线地图、音乐和视频等。百度的出现为人们提供了更便利的信息搜索'
- }, {
- img: '/ld.png',
- name: '周明希',
- title: 'AI',
- content: '还推出了一系列的互联网服务和产品,包括在线地图、音乐和视频等。百度的出现为人们提供了更便利的信息搜索'
- }
- ]
- }
- },
- components: {
- },
- mounted () {
- this.getaboutUs()
- this.getmemberList()
- },
- methods: {
- changenews (item) {
- this.informationitem = item
- },
- changedepth (item) {
- this.depthitem = item
- },
- async getaboutUs () {
- const { data: { message, data } } = await aboutUs()
- if (message === 'success') {
- this.aboutwe.content = data.remark
- this.aboutwe.img = data.image
- }
- },
- async getmemberList () {
- const { data } = await memberList()
- console.log(data)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- #top {
- height: 410px;
- width: 100%;
- background-image: url('../../assets/abouttop.png');
- background-size: 100% 100%;
- position: relative;
- .txt {
- top: 85%;
- left: 25%;
- position: absolute;
- width: 500px;
- display: flex;
- justify-content: space-between;
- a {
- line-height: 15px;
- font-size: 18px;
- font-weight: bold;
- color: #FFFFFF;
- letter-spacing: 40px;
- }
- }
- }
-
- #hot, #daliay, #wk {
- width: 100%;
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- background: #E3E5EA;
- .content {
- width: 1200px;
- height: 90%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- padding-top: 30px;
- .top, .bottom {
- width: 100%;
- }
- .top {
- margin-bottom: 30px;
- display: flex;
- align-items: center;
- justify-content: space-around;
- .js {
- display: flex;
- flex-direction: column;
- height: 80%;
- .title {
- display: inline-block;
- border-left: 7px solid #07CAAF;
- font-size: 36px;
- font-weight: bold;
- color: #0D1114;
- text-align: left;
- padding-left: 30px;
- }
- .jcontent {
- margin-top: 50px;
- display: block;
- font-size: 16px;
- font-weight: 400;
- color: #0D1114;
- line-height: 30px;
- text-align: left;
- }
- }
- img {
- width: 600px;
- height: 400px;
- }
- #hotList {
- display: flex;
- .list {
- display: flex;
- flex-direction: column;
- align-items: center;
- img {
- width: 170px;
- height: 170px;
- margin-bottom: 15px;
- }
- a:not(:nth-last-child(1)) {
- margin-bottom: 15px;
- }
- .name {
- font-size: 24px;
- font-weight: bold;
- color: #0D1114;
- line-height: 30px;
- }
- .title {
- font-size: 24px;
- font-weight: bold;
- color: #07CAAF;
- line-height: 30px;
- }
- .content {
- text-align: left;
- width: 80%;
- font-size: 16px;
- font-weight: 400;
- color: #0D1114;
- line-height: 24px;
- }
- }
- }
- }
- .bottom {
- min-height: 120px;
- background-image: url('../../assets/bottom.png');
- background-size: 100% 100%;
- margin-bottom: 30px;
- }
- }
- }
- #daliay {
- background: #F2F4F8;
- .top {
- min-height: 470px;
- margin-bottom: 40px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- .htitle {
- border-left: 7px solid #07CAAF;
- font-size: 36px;
- font-weight: bold;
- color: #0D1114;
- text-align: left;
- width: 100%;
- padding-left: 30px;
- }
- }
- }
- .swhz {
- background: #E3E5EA;
- .content {
- display: flex;
- flex-direction: row;
- align-items: center;
- margin: 0 auto;
- width: 1200px;
- padding: 96px 0;
- .callme {
- display: flex;
- flex-direction: column;
- .title {
- font-size: 36px;
- border-left: 7px solid #07CAAF;
- padding-left: 30px;
- text-align: left;
- font-weight: bold;
- color: #0D1114;
- }
- div {
- margin-top: 50px;
- a {
- text-align: left;
- display: block;
- padding-left: 35px;
- font-size: 18px;
- font-weight: 400;
- color: #0D1114;
- line-height: 30px;
- }
- }
- }
- img {
- width: 390px;
- height: 240px;
- margin-left: 300px;
- }
- }
- }
-
- #wk {
- height: 400px;
- background: #E3E5EA;
- .content {
- display: flex;
- flex-direction: row;
- align-items: center;
- .callme {
- height: 1200px;
- display: flex;
- flex-direction: column;
- .title {
- font-size: 36px;
- border-left: 7px solid #07CAAF;
- padding-left: 30px;
- text-align: left;
- font-weight: bold;
- color: #0D1114;
- }
- div {
- margin-top: 50px;
- a {
- text-align: left;
- display: block;
- padding-left: 35px;
- font-size: 18px;
- font-weight: 400;
- color: #0D1114;
- line-height: 30px;
- }
- }
- }
- img {
- width: 390px;
- height: 240px;
- }
- }
- }
- </style>
|