|
|
@@ -0,0 +1,151 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <swiper class="swiper square-dot" indicator-color="#D7E3FD" indicator-active-color="#3874F6" :indicator-dots="true"
|
|
|
+ :circular="true" duration="500">
|
|
|
+ <swiper-item class="swiper-item" v-for="(it, i) in apps" key="i">
|
|
|
+ <navigator url="#" class="app" v-for="item in it" key="label">
|
|
|
+ <view class="icon" :style="{ backgroundColor: item.color }">
|
|
|
+ <text class="iconfont" :class="item.icon" />
|
|
|
+ </view>
|
|
|
+ <view class="label u-line-1">
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'workbench',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ apps: [
|
|
|
+ [{
|
|
|
+ label: "巡检中心",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }, {
|
|
|
+ label: "巡检中心1",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }, {
|
|
|
+ label: "巡检中心12",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }, {
|
|
|
+ label: "巡检中心123",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }, {
|
|
|
+ label: "巡检中心1234",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }], [{
|
|
|
+ label: "巡检中心",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }, {
|
|
|
+ label: "巡检中心1",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }, {
|
|
|
+ label: "巡检中心12",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }, {
|
|
|
+ label: "巡检中心123",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }, {
|
|
|
+ label: "巡检中心1234",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }], [{
|
|
|
+ label: "巡检中心",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }, {
|
|
|
+ label: "巡检中心1",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }, {
|
|
|
+ label: "巡检中心12",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }, {
|
|
|
+ label: "巡检中心123",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }, {
|
|
|
+ label: "巡检中心1234",
|
|
|
+ icon: "icon-xunjianzhongxin",
|
|
|
+ color: "#5487F7"
|
|
|
+ }]
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() { },
|
|
|
+ methods: {
|
|
|
+ rander() {
|
|
|
+ let colorList = ['x']
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.container {
|
|
|
+ width: 355px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 10px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ height: 96px;
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 18px;
|
|
|
+
|
|
|
+ .app {
|
|
|
+ width: 68px;
|
|
|
+ height: 69px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px 0;
|
|
|
+ box-sizing: content-box;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 8px;
|
|
|
+ width: 60px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
