cyy-vue-material 7.0.19 → 7.0.21

package/src/package/cyy-ArsenalNavigation/cyy-ArsenalNavigation.vue

@@ -1,236 +1,236 @@
-<template>
-  <div>
-    <div v-if="!resultArr.length" class="holder">
-      <ul>
-        <li v-for="(item, index) in skeleton" :key="index">
-          <div></div>
-          <span>{{ item }}</span>
-        </li>
-      </ul>
-    </div>
-    <template v-else>
-      <div
-        v-if="props.showStyle === 0"
-        class="golds"
-        :style="{ backgroundColor: props.backgroundColor, marginTop: props.marginTop + 'px', marginBottom: props.marginBottom + 'px' }"
-      >
-        <div
-          class="golds-item"
-          :class="[props.navigationNum === 5 ? 'navigationNum5' : 'navigationNum4']"
-          v-for="(item, index) in resultArr"
-          :key="index"
-          @click="linkClick(item)"
-        >
-          <img
-            :class="[props.photoSize === 1 ? 'photoSizeBig' : 'photoSizeSmall']"
-            :style="{ borderRadius: props.photoCorner + '%' }"
-            :lazy-load="true"
-            :src="item['imgUrl']"
-          />
-          <div :style="{ color: props.fontColor }">{{ item.name }}</div>
-        </div>
-      </div>
-      <div v-if="props.showStyle === 1">
-        <div class="classify-list" :style="{ marginTop: props.marginTop + 'px', marginBottom: props.marginBottom + 'px' }">
-          <div
-            class="classify-item"
-            :class="[props.photoSize === 1 ? 'classifyItemBig' : 'classifyItemSmall']"
-            :style="{ backgroundColor: props.backgroundColor }"
-            v-for="(item, index) in resultArr"
-            :key="index"
-            @click="linkClick(item)"
-          >
-            <div :class="[props.photoSize === 1 ? 'classifyFontBig' : 'classifyFontSmall']" :style="{ color: props.fontColor }">{{ item.name }}</div>
-            <img
-              :class="[props.photoSize === 1 ? 'classifyImgBig' : 'classifyImgSmall']"
-              :style="{ borderRadius: classifyPhotoCorner(props.photoCorner) + 'px' }"
-              :lazy-load="true"
-              :src="item['imgUrl']"
-            />
-          </div>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { isEmpty, isUndefined } from "lodash-es";
-export default {
-  name: "cyy-ArsenalPicture",
-  data() {
-    return {
-      skeleton: ["导航1", "导航2", "导航3", "导航4"],
-      imgStyle: {
-        width: "100%",
-        boxSizing: "border-box",
-      },
-    };
-  },
-  props: {
-    props: {
-      showStyle: Number, //展示风格
-      photoSize: Number, //图片尺寸
-      photoCorner: Number, //图片边角
-      fontColor: String, //文字颜色
-      backgroundColor: String, //背景颜色
-      marginTop: Number, //上边距
-      marginBottom: Number, //下边距
-      selectImg: Array, //添加图片
-      navigationNum: Number, //导航数量
-    },
-  },
-  mounted() {
-    if (this.props.navigationNum === 5) {
-      this.skeleton = ["导航1", "导航2", "导航3", "导航4", "导航5"];
-    }
-  },
-  computed: {
-    resultArr() {
-      const { selectImg, defaultValue } = this.props;
-      const computedArr = selectImg
-        .filter((item) => {
-          return item !== null;
-        })
-        .filter((item) => !isUndefined(item))
-        .filter((item) => !Object.values(item).every((citem) => isUndefined(citem)));
-      let arr = defaultValue;
-      if (!isEmpty(computedArr)) {
-        arr = computedArr;
-      }
-      console.log(52, arr);
-      return arr;
-    },
-  },
-  methods: {
-    classifyPhotoCorner(item) {
-      if (item === 20) {
-        return 8;
-      }
-      if (item === 50) {
-        return 16;
-      }
-      return item;
-    },
-    linkClick(item) {
-      this.$emit("linkClick", item);
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-.holder {
-  width: 100%;
-  padding: 10px 0;
-  height: 75px;
-  ul {
-    display: flex;
-    justify-content: space-between;
-    list-style: none;
-    padding: 0 10px;
-    li {
-      list-style: none;
-      div {
-        width: 40px;
-        height: 40px;
-        padding: 10px;
-        background-color: pink;
-        border-radius: 50%;
-        span {
-          display: flex;
-          justify-content: center;
-          font-size: 12px;
-        }
-      }
-    }
-  }
-}
-.golds {
-  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 14px;
-  border-radius: 4px;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  .golds-item {
-    margin: 10px 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    box-sizing: border-box;
-    div {
-      font-size: 11px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      line-height: 15px;
-      text-align: center;
-    }
-  }
-  .navigationNum4 {
-    width: 25%;
-  }
-  .navigationNum5 {
-    width: 20%;
-  }
-}
-.photoSizeBig {
-  width: 58px;
-  height: 58px;
-}
-.photoSizeSmall {
-  width: 48px;
-  height: 48px;
-}
-.classify-list {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  .classify-item {
-    margin-top: 20px;
-    padding: 8px 5px 0.25px;
-    box-sizing: border-box;
-    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
-    border-radius: 14px;
-
-    div {
-      font-weight: bold;
-    }
-
-    img {
-      margin: 7.5px 0;
-    }
-  }
-
-  .classify-item:nth-child(1) {
-    margin-top: 0 !important;
-  }
-
-  .classify-item:nth-child(2) {
-    margin-top: 0 !important;
-  }
-}
-.classifyItemBig {
-  width: 48%;
-}
-.classifyItemSmall {
-  width: 46%;
-}
-.classifyImgBig {
-  width: 100%;
-  height: 90px;
-}
-.classifyImgSmall {
-  width: 100%;
-  height: 87.75px;
-}
-.classifyFontBig {
-  height: 12px;
-  font-size: 12px;
-}
-.classifyFontSmall {
-  height: 12px;
-  font-size: 11px;
-}
-</style>
+<template>
+  <div>
+    <div v-if="!resultArr.length" class="holder">
+      <ul>
+        <li v-for="(item, index) in skeleton" :key="index">
+          <div></div>
+          <span>{{ item }}</span>
+        </li>
+      </ul>
+    </div>
+    <template v-else>
+      <div
+        v-if="props.showStyle === 0"
+        class="golds"
+        :style="{ backgroundColor: props.backgroundColor, marginTop: props.marginTop + 'px', marginBottom: props.marginBottom + 'px' }"
+      >
+        <div
+          class="golds-item"
+          :class="[props.navigationNum === 5 ? 'navigationNum5' : 'navigationNum4']"
+          v-for="(item, index) in resultArr"
+          :key="index"
+          @click="linkClick(item)"
+        >
+          <img
+            :class="[props.photoSize === 1 ? 'photoSizeBig' : 'photoSizeSmall']"
+            :style="{ borderRadius: props.photoCorner + '%' }"
+            :lazy-load="true"
+            :src="item['imgUrl']"
+          />
+          <div :style="{ color: props.fontColor }">{{ item.name }}</div>
+        </div>
+      </div>
+      <div v-if="props.showStyle === 1">
+        <div class="classify-list" :style="{ marginTop: props.marginTop + 'px', marginBottom: props.marginBottom + 'px' }">
+          <div
+            class="classify-item"
+            :class="[props.photoSize === 1 ? 'classifyItemBig' : 'classifyItemSmall']"
+            :style="{ backgroundColor: props.backgroundColor }"
+            v-for="(item, index) in resultArr"
+            :key="index"
+            @click="linkClick(item)"
+          >
+            <div :class="[props.photoSize === 1 ? 'classifyFontBig' : 'classifyFontSmall']" :style="{ color: props.fontColor }">{{ item.name }}</div>
+            <img
+              :class="[props.photoSize === 1 ? 'classifyImgBig' : 'classifyImgSmall']"
+              :style="{ borderRadius: classifyPhotoCorner(props.photoCorner) + 'px' }"
+              :lazy-load="true"
+              :src="item['imgUrl']"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { isEmpty, isUndefined } from "lodash-es";
+export default {
+  name: "cyy-ArsenalPicture",
+  data() {
+    return {
+      skeleton: ["导航1", "导航2", "导航3", "导航4"],
+      imgStyle: {
+        width: "100%",
+        boxSizing: "border-box",
+      },
+    };
+  },
+  props: {
+    props: {
+      showStyle: Number, //展示风格
+      photoSize: Number, //图片尺寸
+      photoCorner: Number, //图片边角
+      fontColor: String, //文字颜色
+      backgroundColor: String, //背景颜色
+      marginTop: Number, //上边距
+      marginBottom: Number, //下边距
+      selectImg: Array, //添加图片
+      navigationNum: Number, //导航数量
+    },
+  },
+  mounted() {
+    if (this.props.navigationNum === 5) {
+      this.skeleton = ["导航1", "导航2", "导航3", "导航4", "导航5"];
+    }
+  },
+  computed: {
+    resultArr() {
+      const { selectImg, defaultValue } = this.props;
+      const computedArr = selectImg
+        .filter((item) => {
+          return item !== null;
+        })
+        .filter((item) => !isUndefined(item))
+        .filter((item) => !Object.values(item).every((citem) => isUndefined(citem)));
+      let arr = defaultValue;
+      if (!isEmpty(computedArr)) {
+        arr = computedArr;
+      }
+      console.log(52, arr);
+      return arr;
+    },
+  },
+  methods: {
+    classifyPhotoCorner(item) {
+      if (item === 20) {
+        return 8;
+      }
+      if (item === 50) {
+        return 16;
+      }
+      return item;
+    },
+    linkClick(item) {
+      this.$emit("linkClick", item);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.holder {
+  width: 100%;
+  padding: 10px 0;
+  height: 75px;
+  ul {
+    display: flex;
+    justify-content: space-between;
+    list-style: none;
+    padding: 0 10px;
+    li {
+      list-style: none;
+      div {
+        width: 40px;
+        height: 40px;
+        padding: 10px;
+        background-color: pink;
+        border-radius: 50%;
+        span {
+          display: flex;
+          justify-content: center;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+.golds {
+  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 14px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  .golds-item {
+    margin: 10px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    div {
+      font-size: 11px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      line-height: 15px;
+      text-align: center;
+    }
+  }
+  .navigationNum4 {
+    width: 25%;
+  }
+  .navigationNum5 {
+    width: 20%;
+  }
+}
+.photoSizeBig {
+  width: 58px;
+  height: 58px;
+}
+.photoSizeSmall {
+  width: 48px;
+  height: 48px;
+}
+.classify-list {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  .classify-item {
+    margin-top: 20px;
+    padding: 8px 5px 0.25px;
+    box-sizing: border-box;
+    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 14px;
+
+    div {
+      font-weight: bold;
+    }
+
+    img {
+      margin: 7.5px 0;
+    }
+  }
+
+  .classify-item:nth-child(1) {
+    margin-top: 0 !important;
+  }
+
+  .classify-item:nth-child(2) {
+    margin-top: 0 !important;
+  }
+}
+.classifyItemBig {
+  width: 48%;
+}
+.classifyItemSmall {
+  width: 46%;
+}
+.classifyImgBig {
+  width: 100%;
+  height: 90px;
+}
+.classifyImgSmall {
+  width: 100%;
+  height: 87.75px;
+}
+.classifyFontBig {
+  height: 12px;
+  font-size: 12px;
+}
+.classifyFontSmall {
+  height: 12px;
+  font-size: 11px;
+}
+</style>