songlin3 vor 3 Jahren
Ursprung
Commit
a024b163c0

+ 161 - 151
2020/trail/aiot/src/views/iot-portal/coreCompete.vue

@ -3,58 +3,57 @@
3 3
    <div class="coreCompete-title">四大核心能力</div>
4 4
    <div class="coreCompete-content-all">
5 5
      <div class="coreCompete-all">
6
        <div class="coreCompete-contents">
7
          <div class="coreCompete-content one" @click="changeIndex1">
8
            <img src="../../assets/coreCompete5.png" class="icon" />
9
            边缘接入</div>
10
          <div class="coreCompete-content two" @click="changeIndex2">
11
            <img src="../../assets/coreCompete6.png" class="icon" />  
12
            云边协同</div>
13
          <div class="coreCompete-content three" @click="changeIndex3">
14
            <img src="../../assets/coreCompete7.png" class="icon" />
15
            设备协同
16
          </div>
17
          <div class="coreCompete-content four" @click="changeIndex4">
18
            <img src="../../assets/coreCompete8.png" class="icon" />
19
            边缘应用
20
          </div>
21
        </div>
22
        <div class="content">
23
          <div v-show="currentIndex === 1" class="tab-content">
24
            <img src="../../assets/coreCompete1.png" />
25
            <div class="tabs-content-title">边缘接入</div>
26
            <div class="tabs-content-desc">
27
              <p>{{desc1}}</p>
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
        <el-tabs
11
          :tab-position="tabPosition"
12
          v-model="activeName"
13
          @tab-click="handleClick"
14
          class="coreCompete-contents"
15
        >
16
          <el-tab-pane name="first">
17
            <span slot="label" class="coreCompete-content one">边缘接入</span>
18
            <div class="tab-content">
19
              <img src="../../assets/coreCompete1.png" />
20
              <div class="tabs-content-title">边缘接入</div>
21
              <div class="tabs-content-desc">
22
                <p>{{ desc1 }}</p>
23
              </div>
28 24
            </div>
29
          </div>
30
        </div>
31
        <div class="content">
32
          <div v-show="currentIndex === 2" class="tab-content">
33
            <img src="../../assets/coreCompete2.png" />
34
            <div class="tabs-content-title">云边协同</div>
35
            <div class="tabs-content-desc">
36
              <p>{{desc2}}</p>
25
          </el-tab-pane>
26
          <el-tab-pane name="second">
27
            <span slot="label" class="coreCompete-content two">云边协同</span>
28
            <div class="tab-content">
29
              <img src="../../assets/coreCompete2.png" />
30
              <div class="tabs-content-title">云边协同</div>
31
              <div class="tabs-content-desc">
32
                <p>{{ desc2 }}</p>
33
              </div>
37 34
            </div>
38
          </div>
39
        </div>
40
        <div class="content">
41
          <div v-show="currentIndex === 3" class="tab-content">
42
            <img src="../../assets/coreCompete3.png" />
43
            <div class="tabs-content-title">设备协同</div>
44
            <div class="tabs-content-desc">
45
              <p>{{desc3}}</p>
35
          </el-tab-pane>
36
          <el-tab-pane name="third">
37
            <span slot="label" class="coreCompete-content three">设备协同</span>
38
            <div class="tab-content">
39
              <img src="../../assets/coreCompete3.png" />
40
              <div class="tabs-content-title">设备协同</div>
41
              <div class="tabs-content-desc">
42
                <p>{{ desc3 }}</p>
43
              </div>
46 44
            </div>
47
          </div>
48
        </div>
49
        <div class="content">
50
          <div v-show="currentIndex === 4" class="tab-content">
51
            <img src="../../assets/coreCompete4.png" />
52
            <div class="tabs-content-title">边缘应用</div>
53
            <div class="tabs-content-desc">
54
              <p>{{desc4}}</p>
45
          </el-tab-pane>
46
          <el-tab-pane name="fourth">
47
            <span slot="label" class="coreCompete-content four">边缘应用</span>
48
            <div class="tab-content">
49
              <img src="../../assets/coreCompete4.png" />
50
              <div class="tabs-content-title">边缘应用</div>
51
              <div class="tabs-content-desc">
52
                <p>{{ desc4 }}</p>
53
              </div>
55 54
            </div>
56
          </div>
57
        </div>
55
          </el-tab-pane>
56
        </el-tabs>
58 57
      </div>
59 58
    </div>
60 59
  </div>
@ -65,45 +64,21 @@ export default {
65 64
  name: "coreCompete",
66 65
  data() {
67 66
    return {
68
      currentIndex: 1,
69
      desc1:'边缘接入是指物联网平台为海量设备提供接入能力,建立设备与平台之间的双向消息通信。支持mqtt,coap,modbus,lwm2m,lorawan等多种协议,通过物模型描述具体设备功能,通过数据解析引擎将数据解析为结构化数据。从而,帮助物联网行业用户快速完成设备联网及行业应用集成。',
70
      desc2:'云边协同是指边缘计算中的多数应用场景需要边缘侧与中心云的协同,包括资源协同、应用协同、数据协同、智能协同等。云计算与边缘计算需要通过紧密协同才能更好地满足各种需求场景的匹配,从而最大化体现云计算与边缘计算的应用价值。',
71
      desc3:'设备协同是通过设备协同规则引擎,可视化配置设备协同规则,包括多个设备之间的联动以及自定义设备告警,实现自动化业务逻辑。如:机房温度大于30度打开空调,机房温度大于40度告警。',
72
      desc4:'边缘应用是边缘侧具体业务的载体,使用边缘应用管理服务可以帮助用户标准化管理边缘应用,包括边缘应用的版本管理、配置管理、监控管理等能力,实现业务功能在边缘侧的自定义。'
67
      activeName: "second",
68
      tabPosition: "left",
69
      desc1:
70
        "边缘接入是指物联网平台为海量设备提供接入能力,建立设备与平台之间的双向消息通信。支持mqtt,coap,modbus,lwm2m,lorawan等多种协议,通过物模型描述具体设备功能,通过数据解析引擎将数据解析为结构化数据。从而,帮助物联网行业用户快速完成设备联网及行业应用集成。",
71
      desc2:
72
        "云边协同是指边缘计算中的多数应用场景需要边缘侧与中心云的协同,包括资源协同、应用协同、数据协同、智能协同等。云计算与边缘计算需要通过紧密协同才能更好地满足各种需求场景的匹配,从而最大化体现云计算与边缘计算的应用价值。",
73
      desc3:
74
        "设备协同是通过设备协同规则引擎,可视化配置设备协同规则,包括多个设备之间的联动以及自定义设备告警,实现自动化业务逻辑。如:机房温度大于30度打开空调,机房温度大于40度告警。",
75
      desc4:
76
        "边缘应用是边缘侧具体业务的载体,使用边缘应用管理服务可以帮助用户标准化管理边缘应用,包括边缘应用的版本管理、配置管理、监控管理等能力,实现业务功能在边缘侧的自定义。",
73 77
    };
74 78
  },
75 79
  methods: {
76
    changeIndex1(event) {
77
      this.currentIndex = 1;
78
      let _dom = document.querySelector(".coreCompete-content.selected");
79
      if (_dom) {
80
        _dom.classList.toggle("selected");
81
      }
82
      event.target.classList.toggle("selected");
83
    },
84
    changeIndex2(event) {
85
      this.currentIndex = 2;
86
      let _dom = document.querySelector(".coreCompete-content.selected");
87
      if (_dom) {
88
        _dom.classList.toggle("selected");
89
      }
90
      event.target.classList.toggle("selected");
91
    },
92
    changeIndex3(event) {
93
      this.currentIndex = 3;
94
      let _dom = document.querySelector(".coreCompete-content.selected");
95
      if (_dom) {
96
        _dom.classList.toggle("selected");
97
      }
98
      event.target.classList.toggle("selected");
99
    },
100
    changeIndex4(event) {
101
      this.currentIndex = 4;
102
      let _dom = document.querySelector(".coreCompete-content.selected");
103
      if (_dom) {
104
        _dom.classList.toggle("selected");
105
      }
106
      event.target.classList.toggle("selected");
80
    handleClick(tab, event) {
81
      console.log(tab, event);
107 82
    },
108 83
  },
109 84
};
@ -115,73 +90,108 @@ export default {
115 90
  flex-direction: column;
116 91
  align-items: center;
117 92
}
118
  .coreCompete-all{
119
    width: 1200px;
120
    height: 600px;
121
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
122
    display: inline-block;
123
    margin-top: 80px;
124
  }
125
  .coreCompete-title {
126
    font-weight: 600;
127
    margin-top: 100px;
128
    font-family: PingFang SC;
129
    font-style: Semibold;
130
    font-size: 44px;
131
  }
132
  .coreCompete-contents {
133
    float: left;
134
    justify-content: center;
135
    align-content: center;
136
  }
137
  .coreCompete-content {
138
    width: 360px;
139
    height: 150px;
140
    display: flex;
141
    justify-content: center;
142
    align-items: center;
143
    background-color: rgba(0, 0, 0, 0.04);
144
    font-family: PingFang SC;
145
    font-size: 22px;
146
    font-weight: 600;
147
  }
148
    .tabs-content-title {
149
      margin-top: 20px;
150
      font-family: PingFang SC;
151
      font-size: 16px;
152
      font-weight: 600;
153
      color: #544c40;
154
    }
155
    .tabs-content-desc {
156
      margin-top: 10px;
157
      width: 780px;
158
      font-family: PingFang SC;
159
      font-size: 16px;
160
      line-height: 30px;
161
      color: #8d9599;
162
      font-weight: 400;
163
      text-align: left;
164
    }
165
    .tab-content{
166
  display:flex;
167
  flex-direction:column;
168
  align-items:center;
169
  margin-top:20px;
170
    }
171
    .selected{
172
      background-color: #1982ff !important;
173
      color: #ffffff !important;
174
      
93
.coreCompete-all {
94
  width: 1200px;
95
  height: 600px;
96
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
97
  margin-top: 80px;
98
}
99
.coreCompete-title {
100
  font-weight: 600;
101
  margin-top: 100px;
102
  font-family: PingFang SC;
103
  font-style: Semibold;
104
  font-size: 44px;
105
}
106
107
img {
108
  height: 300px;
109
  width: 700px;
110
  margin-top: 40px;
111
}
112
/deep/.el-tabs__nav-scroll {
113
  display: block;
114
}
115
/deep/.el-tabs__active-bar {
116
  background-color: transparent;
117
}
118
/deep/.el-tabs__nav-wrap::after {
119
  background-color: transparent;
120
}
121
/deep/.el-tabs__item.is-active {
122
  color: #fff;
123
  background-color: #1982ff;
124
  height: 150px;
125
}
126
/deep/.el-tabs__item {
127
  padding: 0;
128
  height: 150px;
129
}
130
</style>
131
132
<style>
133
    .coreCompete-content-all{
134
position: relative;
175 135
    }
176
  .icon{
177
    width: 46px;
178
    height: 46px;
179
    margin: 0 30px 0 -70px;
180
  }
181 136
182
  img{
183
    height: 300px;
184
    width: 700px;
185
    margin-top: 40px;
186
  }
137
.coreCompete-contents {
138
  justify-content: center;
139
  align-content: center;
140
}
141
.coreCompete-content {
142
  width: 360px;
143
  height: 150px;
144
  display: flex;
145
  justify-content: center;
146
  align-items: center;
147
  background-color: rgba(0, 0, 0, 0.04);
148
  font-family: PingFang SC;
149
  font-size: 22px;
150
  font-weight: 600;
151
}
152
.tabs-content-title {
153
  margin-top: 20px;
154
  font-family: PingFang SC;
155
  font-size: 16px;
156
  font-weight: 600;
157
  color: #544c40;
158
}
159
.tabs-content-desc {
160
  margin-top: 10px;
161
  width: 780px;
162
  font-family: PingFang SC;
163
  font-size: 16px;
164
  line-height: 30px;
165
  color: #8d9599;
166
  font-weight: 400;
167
  text-align: left;
168
}
169
.tab-content {
170
  display: flex;
171
  flex-direction: column;
172
  align-items: center;
173
  margin-top: 20px;
174
}
175
img.icon {
176
  position: absolute;
177
  left: 6%;
178
  width: 46px;
179
  height: 46px;
180
}
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
}
187 197
</style>

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

@ -2,11 +2,7 @@
2 2
  <div class="found">
3 3
    <div class="found-title">只需五步,创建一个物联网</div>
4 4
    <div class="found-content-all">
5
      <img
6
        src="../../assets/foundhead1-1.png"
7
        class="headpic"
8
        @click="chenge"
9
      />
5
      <img src="../../assets/foundhead1-1.png" class="headpic" @click="change"/>
10 6
      <img src="../../assets/foundhead1-2.png" class="headpic" />
11 7
      <img src="../../assets/foundhead1-3.png" class="headpic" />
12 8
      <img src="../../assets/foundhead1-4.png" class="headpic" />
@ -60,6 +56,9 @@ export default {
60 56
    handleClick(tab, event) {
61 57
      console.log(tab, event);
62 58
    },
59
   change(){
60
    //  Image:("../../assets/foundhead1-4.png");
61
   },
63 62
  },
64 63
};
65 64
</script>
@ -131,10 +130,6 @@ img {
131 130
}
132 131
.first-content.one {
133 132
  padding-left: 50px;
134
  left: 24.9%;
135
}
136
.first-content.two {
137
  left: 600%;
138 133
}
139 134
.first-content.three {
140 135
  padding-left: 30px;