Browse Source

样式修改

songlin3 3 years ago
parent
commit
00ffd3d057

+ 22 - 25
2020/trail/aiot/src/views/iot-portal/coreCompete.vue

@ -3,10 +3,6 @@
3 3
    <div class="coreCompete-title">四大核心能力</div>
4 4
    <div class="coreCompete-content-all">
5 5
      <div class="coreCompete-all">
6
            <img src="../../assets/coreCompete5.png" class="icon icon1" />
7
            <img src="../../assets/coreCompete6.png" class="icon icon2" />
8
            <img src="../../assets/coreCompete7.png" class="icon icon3" />
9
            <img src="../../assets/coreCompete8.png" class="icon icon4" />
10 6
        <el-tabs
11 7
          :tab-position="tabPosition"
12 8
          v-model="activeName"
@ -14,7 +10,9 @@
14 10
          class="coreCompete-contents"
15 11
        >
16 12
          <el-tab-pane name="first">
17
            <span slot="label" class="coreCompete-content one">边缘接入</span>
13
            <div slot="label" class="coreCompete-content one" >
14
            <img src="../../assets/coreCompete5.png" class="icon icon1" />
15
              边缘接入</div>
18 16
            <div class="tab-content">
19 17
              <img src="../../assets/coreCompete1.png" />
20 18
              <div class="tabs-content-title">边缘接入</div>
@ -24,7 +22,9 @@
24 22
            </div>
25 23
          </el-tab-pane>
26 24
          <el-tab-pane name="second">
27
            <span slot="label" class="coreCompete-content two">云边协同</span>
25
            <div slot="label" class="coreCompete-content two" >
26
            <img src="../../assets/coreCompete6.png" class="icon icon2" />
27
              云边协同</div>
28 28
            <div class="tab-content">
29 29
              <img src="../../assets/coreCompete2.png" />
30 30
              <div class="tabs-content-title">云边协同</div>
@ -34,7 +34,9 @@
34 34
            </div>
35 35
          </el-tab-pane>
36 36
          <el-tab-pane name="third">
37
            <span slot="label" class="coreCompete-content three">设备协同</span>
37
            <div slot="label" class="coreCompete-content three" >
38
            <img src="../../assets/coreCompete7.png" class="icon icon2" />
39
              设备协同</div>
38 40
            <div class="tab-content">
39 41
              <img src="../../assets/coreCompete3.png" />
40 42
              <div class="tabs-content-title">设备协同</div>
@ -44,7 +46,9 @@
44 46
            </div>
45 47
          </el-tab-pane>
46 48
          <el-tab-pane name="fourth">
47
            <span slot="label" class="coreCompete-content four">边缘应用</span>
49
            <div slot="label" class="coreCompete-content four" >
50
            <img src="../../assets/coreCompete8.png" class="icon icon2" />
51
              边缘应用</div>
48 52
            <div class="tab-content">
49 53
              <img src="../../assets/coreCompete4.png" />
50 54
              <div class="tabs-content-title">边缘应用</div>
@ -80,8 +84,11 @@ export default {
80 84
    handleClick(tab, event) {
81 85
      console.log(tab, event);
82 86
    },
87
   
88
   
83 89
  },
84 90
};
91
  
85 92
</script>
86 93
87 94
<style lang="scss" scoped>
@ -120,6 +127,7 @@ img {
120 127
}
121 128
/deep/.el-tabs__item.is-active {
122 129
  color: #fff;
130
  // opacity: 1;
123 131
  background-color: #1982ff;
124 132
  height: 150px;
125 133
}
@ -148,6 +156,10 @@ position: relative;
148 156
  font-family: PingFang SC;
149 157
  font-size: 22px;
150 158
  font-weight: 600;
159
  /* opacity: 0.45; */
160
}
161
.coreCompete-content .one .two .three .four{
162
  opacity: 0.45;
151 163
}
152 164
.tabs-content-title {
153 165
  margin-top: 20px;
@ -174,24 +186,9 @@ position: relative;
174 186
}
175 187
img.icon {
176 188
  position: absolute;
177
  left: 6%;
189
  left: 18%;
190
  top: 9%;
178 191
  width: 46px;
179 192
  height: 46px;
180 193
}
181
.icon1{
182
  position: absolute;
183
  top: 14%;
184
}
185
.icon2{
186
  position: absolute;
187
  top: 36%;
188
}
189
.icon3{
190
  position: absolute;
191
  top: 58%;
192
}
193
.icon4{
194
  position: absolute;
195
  top: 80%;
196
}
197 194
</style>

+ 1 - 4
2020/trail/aiot/src/views/iot-portal/found.vue

@ -2,7 +2,7 @@
2 2
  <div class="found">
3 3
    <div class="found-title">只需五步,创建一个物联网</div>
4 4
    <div class="found-content-all">
5
      <img src="../../assets/foundhead1-1.png" class="headpic" @click="change"/>
5
      <img src="../../assets/foundhead1-1.png" class="headpic" />
6 6
      <img src="../../assets/foundhead1-2.png" class="headpic" />
7 7
      <img src="../../assets/foundhead1-3.png" class="headpic" />
8 8
      <img src="../../assets/foundhead1-4.png" class="headpic" />
@ -56,9 +56,6 @@ export default {
56 56
    handleClick(tab, event) {
57 57
      console.log(tab, event);
58 58
    },
59
   change(){
60
    //  Image:("../../assets/foundhead1-4.png");
61
   },
62 59
  },
63 60
};
64 61
</script>