|
@@ -0,0 +1,67 @@
|
|
|
+<template>
|
|
|
+ <a-card>
|
|
|
+ <a-row :gutter="20">
|
|
|
+ <a-col :span="4">
|
|
|
+ <div
|
|
|
+ class="box"
|
|
|
+ :class="{'box-act':i === key}"
|
|
|
+ v-for="(item,i) in positionsList.slice(0, 2)"
|
|
|
+ :key="item.id"
|
|
|
+ style="text-align: center;"
|
|
|
+ @click="handleClick(i)">{{ item.name }}</div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="20">
|
|
|
+ <img v-if="key" :src="img1" width="100%" alt="">
|
|
|
+ <img v-else :src="img2" width="100%" alt="">
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import img1 from '@/assets/a/1.png'
|
|
|
+import img2 from '@/assets/a/4.png'
|
|
|
+import { querySbPosition } from '@/api/sb/position'
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ img1,
|
|
|
+ img2,
|
|
|
+ positionsList: [],
|
|
|
+ key: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getInfo()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getInfo () {
|
|
|
+ querySbPosition().then(res => {
|
|
|
+ this.positionsList = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClick (i) {
|
|
|
+ this.key = i
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.box{
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ background: #fff;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 100px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.box-act{
|
|
|
+ background: #1890ff;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|