large-model-component 1.0.0 → 1.0.2

package/docs/comps/README.md

@@ -5,7 +5,7 @@
 安装命令：
 
 ```shell
-npm i industrial-web-component -S
+npm i large-model-component -S
 
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "large-model-component",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -13,26 +13,15 @@
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs"
   },
-  "peerDependencies": {
-    "element-ui": "^2.15.14"
-  },
   "main": "dist/large-model-component.umd.min.js",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "axios": "0.18.1",
+    "axios": "^1.8.2",
     "core-js": "^3.8.3",
-    "element-ui": "2.13.2",
-    "event-source-polyfill": "^1.0.31",
-    "highlight.js": "^11.7.0",
-    "python": "^0.0.4",
-    "sass": "^1.32.0",
-    "spark-md5": "^3.0.2",
-    "vue": "^2.6.14",
-    "vuex": "^3.6.2",
-    "vue-router": "3.0.6",
+    "element-ui": "^2.15.14",
     "markdown-it": "12.3.2",
     "markdown-it-abbr": "^2.0.0",
     "markdown-it-container": "^4.0.0",
@@ -45,6 +34,11 @@
     "markdown-it-sub": "^2.0.0",
     "markdown-it-sup": "^2.0.0",
     "markdown-it-task-lists": "^2.1.1",
+    "highlight.js": "^11.11.1",
+    "event-source-polyfill": "^1.0.31",
+    "python": "^0.0.4",
+    "spark-md5": "^3.0.2",
+    "vue": "^2.6.14",
     "webpack": "5.94.0"
   },
   "devDependencies": {
@@ -57,8 +51,8 @@
     "@vue/vue2-jest": "^27.0.0-alpha.2",
     "babel-jest": "^27.0.6",
     "jest": "^27.0.5",
-    "sass": "^1.32.0",
-    "sass-loader": "^10.2.0",
+    "node-sass": "^4.9.3",
+    "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.6.14",
     "vuepress": "^1.9.10",
     "vuepress-plugin-demo-container": "^0.2.0"

package/packages/footer/footer.vue

@@ -0,0 +1,346 @@
+<template>
+  <footer>
+    <div class="footer">
+      <div class="footer-content">
+        <div class="footer-content-info">
+          <div class="footer-content-info-links">
+            <div class="footer-content-info-links-title">友情链接</div>
+            <div class="footer-content-info-links-content">
+              <div
+                v-for="(item, index) in footerInfo.FRIENDLYLINK"
+                class="footer-content-info-links-content-item"
+                @click="jumpBlogroll(item.uri)"
+              >
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
+          <div class="footer-content-info-contact">
+            <div class="footer-content-info-contact-title">联系我们</div>
+            <div class="footer-content-info-contact-content">
+              <div
+                v-for="(item, index) in footerInfo.CONTACTUS"
+                class="footer-content-info-contact-content-item"
+              >
+                <svg
+                  v-if="item.type === 'mail'"
+                  width="24px"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                >
+                  <title>邮箱</title>
+                  <g id="门户" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <g id="门户首页" transform="translate(-935.000000, -4624.000000)">
+                      <g id="编组-14" transform="translate(0.000000, 4528.000000)">
+                        <g id="编组-10" transform="translate(361.000000, 48.000000)">
+                          <g id="编组-14" transform="translate(574.000000, 0.000000)">
+                            <g id="编组" transform="translate(0.000000, 48.000000)">
+                              <polygon id="路径" points="0 0 24 0 24 24 0 24"></polygon>
+                              <path
+                                d="M4.77777778,5 L18.7777778,5 C19.2073326,5 19.5555556,5.34822297 19.5555556,5.77777778 L19.5555556,18.2222222 C19.5555556,18.651777 19.2073326,19 18.7777778,19 L4.77777778,19 C4.34822297,19 4,18.651777 4,18.2222222 L4,5.77777778 C4,5.34822297 4.34822297,5 4.77777778,5 Z M11.8244444,11.7534444 L6.83733333,7.51844444 L5.83011111,8.70377778 L11.8345556,13.8021111 L17.7308889,8.69988889 L16.7135556,7.52311111 L11.8252222,11.7534444 L11.8244444,11.7534444 Z"
+                                id="形状"
+                                fill="#FFFFFF"
+                                fill-rule="nonzero"
+                              ></path>
+                            </g>
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </svg>
+                <svg
+                  v-else
+                  width="24px"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                >
+                  <title>编组</title>
+                  <g id="门户" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <g id="门户首页" transform="translate(-935.000000, -4696.000000)">
+                      <g id="编组-14" transform="translate(0.000000, 4528.000000)">
+                        <g id="编组-10" transform="translate(361.000000, 48.000000)">
+                          <g id="编组-14" transform="translate(574.000000, 0.000000)">
+                            <g id="编组-9" transform="translate(0.000000, 48.000000)">
+                              <g id="编组" transform="translate(0.000000, 72.000000)">
+                                <polygon id="路径" points="0 0 24 0 24 24 0 24"></polygon>
+                                <path
+                                  d="M20.5000552,16.1744858 L20.5000552,19.5140522 C20.5002799,20.0101652 20.1166151,20.421883 19.621719,20.4566109 C19.2089955,20.4849443 18.8718277,20.5000554 18.6111602,20.5000554 C10.2650775,20.5000554 3.5,13.7349779 3.5,5.38889527 C3.5,5.12822776 3.51416671,4.79105999 3.54344459,4.37833643 C3.57817245,3.88344037 3.98989023,3.49977551 4.4860032,3.5 L7.8255696,3.5 C8.06826809,3.49975451 8.27163472,3.68351955 8.29590446,3.92500163 C8.31762675,4.14222455 8.33746015,4.31505845 8.3563491,4.44633665 C8.54404316,5.75621282 8.92868695,7.03018616 9.49724169,8.22507114 C9.58696421,8.41396065 9.52840846,8.6396836 9.35840791,8.76057288 L7.32029018,10.2169109 C8.56644461,13.1205689 10.880431,15.4345553 13.7840889,16.6807097 L15.2385381,14.6463698 C15.3612223,14.474854 15.5890122,14.4156207 15.7797065,14.5056471 C16.974453,15.0731331 18.2480952,15.4568178 19.5574966,15.6437063 C19.6887748,15.6625953 19.8616087,15.6833731 20.0769427,15.704151 C20.3180506,15.7288727 20.5012943,15.9321141 20.501,16.1744858 L20.5000552,16.1744858 Z"
+                                  id="路径"
+                                  fill="#FFFFFF"
+                                  fill-rule="nonzero"
+                                ></path>
+                              </g>
+                            </g>
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </svg>
+                <span>{{ item.name }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="footer-content-info-focus">
+            <div class="footer-content-info-focus-title">扫码关注我们</div>
+            <div class="footer-content-info-focus-content">
+              <div
+                v-for="(item, index) in footerInfo.FOLLOWUS"
+                class="footer-content-info-focus-content-item"
+              >
+                <img :src="item.uri" :alt="item.name"/>
+                <div>{{ item.name }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="footer-content-line"></div>
+        <div class="footer-content-bottom">
+          <a
+            v-for="(item, index) in footerInfo.STATEMENT"
+            style="margin-right: 4px"
+            :key="`statement-${index}`"
+            :href="item.uri"
+          >{{ `${item.name}` }}
+          </a>
+          <br/>
+          <span v-for="(item, indexs) in footerInfo.FILING" :key="`filing-${indexs}`" @click="jumpBlogroll(item.uri)">{{
+              item.name
+            }}</span>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'iipFooter',
+  data() {
+    return {
+      footerInfo: {
+        STATEMENT: [],
+        FRIENDLYLINK: [],
+        FILING: [],
+        CONTACTUS: [],
+        FOLLOWUS: [],
+      },
+    };
+  },
+  props: {
+    // 优先级顺序，传入 接口 > 默认数据
+    // nuxt环境下推荐使用clientOnly，
+    // 1，nuxt组件，无法取到当前的URI。仅支持传入数据 > 传入接口 > 默认数据
+    // 2，vue组件，[传入数据 > 传入接口] > 默认接口数据 > 默认数据
+    apiHost: {
+      type: String,
+      default: '',
+    },
+    apiPath: {
+      // 使用接口
+      type: String,
+      default: '',
+    },
+    footerData: {
+      type: Object,
+      default: () => {
+      },
+    },
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      if (this.apiPath) {
+        // 使用接口来获取数据
+        const uri = this.apiHost || window.location.origin;
+        const service = axios.create({
+          baseURL: uri,
+          timeout: 5000,
+        });
+        const res = await service({
+          url: this.apiPath,
+          method: `get`,
+        });
+        if (res.data.code === 200) {
+          this.footerInfo = res.data.data.links;
+        }
+      } else {
+        this.footerInfo = this.footerData;
+      }
+    },
+    jumpBlogroll(url) {
+      if(!url){
+        return
+      }
+      window.open(url, '_blank');
+    },
+  },
+  watch: {
+    footerData(val) {
+      this.footerInfo = val;
+    },
+  },
+};
+</script>
+<style lang="scss" scope>
+.footer {
+  position: inherit;
+  // bottom: 0;
+  background: #3d485d;
+  width: 100%;
+  height: 400px;
+
+  .footer-content {
+    width: 1200px;
+    margin: 0 auto;
+
+    .footer-content-info {
+      display: flex;
+      justify-content: space-around;
+      height: 100%;
+      width: 1200px;
+      padding: 48px 10px;
+
+      .footer-content-info-links {
+        width: 380px;
+        height: 160px;
+
+        .footer-content-info-links-title {
+          font-size: 20px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: bold;
+          color: #ffffff;
+          line-height: 24px;
+        }
+
+        .footer-content-info-links-content {
+          width: 100%;
+          margin-top: 24px;
+          display: flex;
+          flex-wrap: wrap;
+
+          .footer-content-info-links-content-item {
+            width: 190px;
+            height: 30px;
+            color: #ffffff;
+            font-size: 14px;
+            cursor: pointer;
+          }
+        }
+      }
+
+      .footer-content-info-contact {
+        width: 380px;
+        height: 160px;
+
+        .footer-content-info-contact-title {
+          font-size: 20px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+          line-height: 24px;
+        }
+
+        .footer-content-info-contact-content {
+          width: 100%;
+          margin-top: 24px;
+
+          .footer-content-info-contact-content-item {
+            display: flex;
+            margin-bottom: 12px;
+
+            img {
+            }
+
+            span {
+              display: inline-block;
+              line-height: 20px;
+              max-width: 300px; /* 设置最大宽度 */
+              font-family: PingFangSC-Regular, PingFang SC;
+              color: #ffffff;
+              white-space: normal; /* 允许正常换行 */
+              overflow-wrap: break-word; /* 允许在单词内换行 */
+              word-break: break-all; /* 在任意字符间换行 */
+              vertical-align: middle;
+              font-size: 14px;
+              font-weight: 400;
+            }
+          }
+        }
+      }
+
+      .footer-content-info-focus {
+        width: 380px;
+        height: 160px;
+
+        .footer-content-info-focus-title {
+          font-size: 20px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: bold;
+          color: #ffffff;
+          line-height: 24px;
+        }
+
+        .footer-content-info-focus-content {
+          margin-top: 30px;
+          display: flex;
+
+          .footer-content-info-focus-content-item {
+            margin-right: 36px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              width: 72px;
+              text-align: center;
+              font-size: 14px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 20px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer-content-line {
+      margin-top: 43px;
+      width: 1200px;
+      height: 1px;
+      background: #88909b;
+      opacity: 0.3;
+    }
+
+    .footer-content-bottom {
+      width: 1200px;
+      margin: 0 auto;
+      margin-top: 24px;
+      text-align: center;
+
+      &,
+      a,
+      span {
+        color: #7c7c7c;
+        font-weight: normal;
+        font-size: 12px;
+        line-height: 24px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

package/packages/footer/index.js

@@ -0,0 +1,2 @@
+import iipFooter from './footer.vue'
+export default iipFooter