@bdsoft/element 1.1.13 → 1.1.15

package/src/components/layout/banner.vue

@@ -0,0 +1,412 @@
+<!--
+* @FileDescription:  首页大banner展示
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from "vue";
+const props = defineProps({
+    waprstyle: {
+        type: Object,
+        default: () => { }
+    },
+    title1: {
+        type: String,
+        default: '综合研究成果管理平台'
+    },
+    title2: {
+        type: String,
+        default: '面向勘探开发研究院的成果管理及共享平台'
+    },
+})
+</script>
+<template>
+    <div class="banner" :style="waprstyle">
+        <div class="banner-center">
+            <div class="banner-text">
+                <h3>{{ title1 }}</h3>
+                <h4>{{ title2 }}</h4>
+
+            </div>
+            <div class="banner-img">
+                <img src="../../assets/images/po-i.png" alt="" class="pos">
+                <span class="po1">
+                    <img src="../../assets/images/po1-i1.png" alt="" class="po1-i1">
+                    <img src="../../assets/images/po1-i2.png" alt="" class="po1-i2">
+                    <img src="../../assets/images/po1-i3.png" alt="" class="po1-i3">
+                    <img src="../../assets/images/po1-i4.png" alt="" class="po1-i4">
+                    <img src="../../assets/images/po1-i5.png" alt="" class="po1-i5">
+                    <img src="../../assets/images/po1-i6.png" alt="" class="po1-i6">
+                    <img src="../../assets/images/po1-i7.png" alt="" class="po1-i7">
+                    <img src="../../assets/images/po1-i8.png" alt="" class="po1-i8 i1">
+                    <img src="../../assets/images/po1-i8.png" alt="" class="po1-i8 i2">
+                    <img src="../../assets/images/po1-i8.png" alt="" class="po1-i8 i3">
+                    <img src="../../assets/images/po1-i8.png" alt="" class="po1-i8 i4">
+                    <img src="../../assets/images/po1-i8.png" alt="" class="po1-i8 i5">
+                    <img src="../../assets/images/po1-i8.png" alt="" class="po1-i8 i6">
+                    <img src="../../assets/images/po1-i8.png" alt="" class="po1-i8 i7">
+                    <img src="../../assets/images/po1-i8.png" alt="" class="po1-i8 i8">
+                </span>
+                <span class="po2">
+                    <img src="../../assets/images/po2-i1.png" alt="" class="po2-i1">
+                    <img src="../../assets/images/po2-i2.png" alt="" class="po2-i2">
+                </span>
+                <img src="../../assets/images/po3-i1.png" alt="" class="po3">
+                <span class="po4">
+                    <img src="../../assets/images/po4-i1.png" alt="" class="po4-i1">
+                    <img src="../../assets/images/po4-i2.png" alt="" class="po4-i2">
+                </span>
+                <img src="../../assets/images/po5-i1.png" alt="" class="po5">
+                <span class="po6">
+                    <img src="../../assets/images/po6-i2.png" alt="" class="po6-i2">
+                    <img src="../../assets/images/po6-i1.png" alt="" class="po6-i1">
+                </span>
+                <span class="po6 po62">
+                    <img src="../../assets/images/po6-i2.png" alt="" class="po6-i2">
+                    <img src="../../assets/images/po6-i1.png" alt="" class="po6-i1">
+                </span>
+                <img src="../../assets/images/po7-i1.png" alt="" class="po7">
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.banner {
+    background: url(../../assets/images/images/banner.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-color: #3186FB;
+    height: 574px;
+
+    .banner-center {
+        position: relative;
+        margin: 0 auto;
+        max-width: 1200px;
+        height: 100%;
+        // clear: both;
+
+        .banner-text {
+            position: absolute;
+            width: 43%;
+            color: #fff;
+            left: 30px;
+            top: 50%;
+            transform: translate(0, -50%);
+
+            h3 {
+                font-size: 24px;
+                margin-bottom: 25px;
+            }
+
+            h4 {
+                font-size: 19px;
+                margin-bottom: 17px;
+                font-weight: normal;
+            }
+        }
+
+        .banner-img {
+            width: 540px;
+            height: 335px;
+            position: absolute;
+            right: 30px;
+            top: 50%;
+            transform: translate(0, -50%);
+
+            img,
+            span {
+                position: absolute;
+            }
+
+            .pos {
+                width: 100%;
+                height: 91.77%;
+                bottom: 0;
+                right: 0;
+            }
+
+            .po1 {
+                width: 12.55%;
+                height: 32.94%;
+                left: 41%;
+                top: 8%;
+
+                .po1-i1 {
+                    width: 79.07%;
+                    height: 28.57%;
+                    left: 15%;
+                    bottom: 0;
+                    animation: topOp2 2s linear infinite;
+                    opacity: 0;
+                }
+
+                .po1-i2 {
+                    width: 61.62%;
+                    height: 22.14%;
+                    left: 23%;
+                    bottom: 19%;
+                    animation: topOp2 2s linear infinite;
+                    opacity: 0;
+                }
+
+                .po1-i3 {
+                    width: 45.45%;
+                    height: 16.43%;
+                    left: 31%;
+                    bottom: 33%;
+                    animation: topOp2 2s linear infinite;
+                    opacity: 0;
+                }
+
+                .po1-i4 {
+                    width: 36.05%;
+                    height: 12.86%;
+                    left: 36%;
+                    bottom: 45%;
+                    animation: topOp2 2s linear infinite;
+                    opacity: 0;
+                }
+
+                .po1-i5 {
+                    width: 4.65%;
+                    height: 2.86%;
+                    left: 15%;
+                    bottom: 35%;
+                }
+
+                .po1-i6 {
+                    width: 10.46%;
+                    height: 6.43%;
+                    left: 27%;
+                    bottom: -2%;
+                }
+
+                .po1-i7 {
+                    width: 8.14%;
+                    height: 5%;
+                    left: 91%;
+                    bottom: 24%;
+                }
+
+                .po1-i8 {
+                    width: 3.49%;
+                    height: 20.71%;
+                }
+
+                .po1-i8.i1 {
+                    left: 85%;
+                    top: 28%;
+                    animation: topOp 1s linear infinite;
+                    opacity: 0;
+                }
+
+                .po1-i8.i2 {
+                    left: 54%;
+                    top: 48%;
+                    animation: topOp 1s linear 0.2s infinite;
+                    opacity: 0;
+                }
+
+                .po1-i8.i3 {
+                    left: 38%;
+                    top: 23%;
+                    animation: topOp 1s linear 0.6s infinite;
+                    opacity: 0;
+                }
+
+                .po1-i8.i4 {
+                    left: 49%;
+                    top: 11%;
+                    animation: topOp 1s linear 0.3s infinite;
+                    opacity: 0;
+                }
+
+                .po1-i8.i5 {
+                    left: 43%;
+                    top: 57%;
+                    animation: topOp 1s linear 0.1s infinite;
+                    opacity: 0;
+                }
+
+                .po1-i8.i6 {
+                    left: 23%;
+                    top: 34%;
+                    animation: topOp 1s linear 0.7s infinite;
+                    opacity: 0;
+                }
+
+                .po1-i8.i7 {
+                    left: 68%;
+                    top: 7%;
+                    animation: topOp 1s linear 0.4s infinite;
+                    opacity: 0;
+                }
+
+                .po1-i8.i8 {
+                    left: 64%;
+                    top: 32%;
+                    animation: topOp 1s linear 0.5s infinite;
+                    opacity: 0;
+                }
+            }
+
+            .po2 {
+                width: 18.98%;
+                height: 22.82%;
+                left: 3%;
+                top: 45%;
+
+                .po2-i1 {
+                    width: 46.15%;
+                    height: 100%;
+                    left: 0;
+                    top: 0;
+                    animation: topDown1 3s linear infinite;
+                }
+
+                .po2-i2 {
+                    width: 22.31%;
+                    height: 42.27%;
+                    right: 0;
+                    top: 21%;
+                }
+            }
+
+            .po3 {
+                width: 15.33%;
+                height: 27.53%;
+                left: 14%;
+                top: 15%;
+                animation: topDown1 3.5s linear infinite;
+            }
+
+            .po4 {
+                width: 18.1%;
+                height: 20.7%;
+                right: 13%;
+                top: 14%;
+
+                .po4-i1 {
+                    width: 43.6%;
+                    height: 100%;
+                    right: 0;
+                    top: 0;
+                    animation: topDown1 2.1s linear infinite;
+                }
+
+                .po4-i2 {
+                    width: 23%;
+                    height: 46.6%;
+                    left: 0;
+                    top: 36%;
+                }
+            }
+
+            .po5 {
+                width: 9.05%;
+                height: 22.89%;
+                right: 22.8%;
+                top: 49%;
+            }
+
+            .po6,
+            .po62 {
+                width: 4.53%;
+                height: 15.29%;
+                right: 39%;
+                top: -1%;
+
+                .po6-i1 {
+                    width: 100%;
+                    height: 90.77%;
+                    left: 0;
+                    bottom: 0;
+                    animation: huoMiao2 2s linear infinite;
+                }
+
+                .po6-i2 {
+                    width: 83.87%;
+                    height: 80%;
+                    left: 8%;
+                    top: 0%;
+                    animation: topDown1 2.5s linear infinite;
+                }
+            }
+
+            .po62 {
+                right: 49.5%;
+                top: 68%;
+            }
+
+            .po7 {
+                width: 8.75%;
+                height: 16.71%;
+                left: -22.8%;
+                bottom: 0;
+            }
+        }
+    }
+}
+
+@keyframes topOp {
+    0% {
+        transform: translate(0px, 0px);
+        -webkit-transform: translate(0px, 0px);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translate(0, -35px);
+        -webkit-transform: translate(0, -35px);
+        opacity: 0;
+    }
+}
+
+@keyframes topOp2 {
+    0% {
+        transform: translate(0px, 0px);
+        -webkit-transform: translate(0px, 0px);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translate(0, -10px);
+        -webkit-transform: translate(0, -10px);
+        opacity: 1;
+    }
+}
+
+@keyframes topDown1 {
+    0% {
+        transform: translate(0px, 0px);
+        -webkit-transform: translate(0px, 0px);
+    }
+
+    50% {
+        transform: translate(0, -8px);
+        -webkit-transform: translate(0, -8px);
+    }
+
+    100% {
+        transform: translate(0px, 0px);
+        -webkit-transform: translate(0px, 0px);
+    }
+}
+
+@keyframes huoMiao2 {
+    0% {
+        height: 75%;
+    }
+
+    50% {
+        height: 100%;
+    }
+
+    100% {
+        height: 75%;
+    }
+}
+</style>

package/src/components/layout/bar.vue

@@ -0,0 +1,43 @@
+<!--
+* @FileDescription:  
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<script setup>
+import { ref, useAttrs, computed, watch, onMounted } from "vue";
+const props = defineProps({
+    innerHeight: {
+        type: String,
+        default: '50px'
+    },
+    paddingTop: {
+        type: String,
+        default: '15px'
+    },
+    paddingLeft: {
+        type: String,
+        default: '0px'
+    }
+});
+let attrs = useAttrs();
+const style = attrs.style;
+
+</script>
+<template>
+    <div class="headwarp" :style="{ style }">
+        <div class="headwarp-top" :style="{ height: innerHeight }">
+            <div class="headwarp-bottom" :style="{ paddingTop: paddingTop,paddingLeft: paddingLeft }">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.headwarp-bottom {
+    line-height: 100% !important;
+    height: 100% !important;
+}
+</style>

package/src/components/layout/layout1.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { computed } from 'vue';
+
+// 项目中引入base.scss文件(去掉下面的样式)或者 不引入公共文件 添加下面的style样式
+// 左右布局
+const props = defineProps({
+  title: {
+    type: String,
+    default: '左侧菜单栏'
+  },
+  // 左侧宽度
+  leftWidth: {
+    type: String,
+    default: '200px'
+  },
+  // 左侧样式配置
+  leftStyles: {
+    type: Object,
+    default: () => {
+      return {
+        padding: '0px',
+        margin: '0px 10px 0px 0px'
+      }
+    }
+  },
+  // 右侧样式配置
+  rightStyles: {
+    type: Object,
+    default: () => {
+      return {
+        padding: '0px',
+        margin: '10px 10px 0px 0px'
+      }
+    }
+  }
+
+});
+// 是否显示标题栏
+const showLeftTop = computed(() => {
+  return props.title ? true : false
+})
+</script>
+
+<template>
+  <el-container class="containerBg">
+    <el-aside :width="leftWidth" :style="{ ...leftStyles }">
+      <div class="top" v-if="showLeftTop">
+        <div class="topin">{{ title }}</div>
+      </div>
+      <!-- 左侧区域 -->
+      <slot name="left"></slot>
+    </el-aside>
+    <el-main class="containerRight" :style="{ ...rightStyles }">
+      <!-- 侧区域 -->
+      <slot></slot>
+    </el-main>
+  </el-container>
+</template>
+
+<style scoped></style>

package/src/components/layout/layout2.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { ref,computed } from 'vue'
+// 项目中引入base.scss文件(去掉下面的样式)或者 不引入公共文件 添加下面的style样式
+import { Search } from '@element-plus/icons-vue'
+const emits = defineEmits(['searchTable'])
+const props = defineProps({
+  title: {
+    type: String,
+    default: '左侧菜单栏'
+  },
+  leftWidth: {
+    type: String,
+    default: '200px'
+  },
+  leftStyles: {
+    type: Object,
+    default: () => {
+      return {
+        padding: '0px',
+        margin: '0px 10px 0px 0px'
+      }
+    }
+  },
+  // 右侧样式配置
+  rightStyles: {
+    type: Object,
+    default: () => {
+      return {
+        padding: '0px',
+        margin: '0px 0px 10px 0px'
+      }
+    }
+  }
+})
+const searchValue = ref('')
+
+// 是否显示标题栏
+const showLeftTop = computed(() => {
+  return props.title ? true : false
+})
+// 搜索
+const getTableData = () => {
+  emits('searchTable', searchValue.value)
+}
+</script>
+
+<template>
+  <el-container class="containerBg">
+    <el-aside :width="leftWidth" :style="{ ...leftStyles }">
+      <div class="top" v-if="showLeftTop">
+        <div class="topin">{{ title }}</div>
+      </div>
+      <slot name="left"></slot>
+    </el-aside>
+    <el-container
+      style="background-color: #fff; margin: 10px 10px 10px 0; height: calc(100% - 20px); border-radius: 4px">
+      <el-header height="50px" class="headwarp" style="border-bottom: 1px solid #e6e6e6; border-radius: 4px 4px 0 0">
+        <div class="headwarp-top" style="border-radius: 4px">
+          <div class="headwarp-bottom" style="padding-left: 0px;">
+            <slot name="lefttop">
+              <span class="warpmenu" @click="addTable" title="添加">
+                <img class="menuimg" src="../../assets/images/menu/add.png" />
+                添加
+              </span>
+              <span class="warpmenu" @click="editTable" title="编辑"> <img class="menuimg"
+                  src="../../assets/images/menu/edit.png" /> 编辑 </span>
+              <span class="warpmenu" @click="delTable" title="删除"> <img class="menuimg"
+                  src="../../assets/images/menu/del.png" /> 删除</span>
+              <el-divider direction="vertical" />
+            </slot>
+          </div>
+          <div class="top_right" style="width: 200px">
+            <slot name="righttop2">
+              <!-- 报表搜索 righttop-->
+              <el-input v-model="searchValue" placeholder="全局搜索" size="default" @keyup.enter="getTableData(true, true)"
+                clearable @clear="getTableData()" :prefix-icon="Search" class="top_search"> </el-input>
+            </slot>
+          </div>
+        </div>
+      </el-header>
+      <el-main class="main-container" :style="{ ...rightStyles }">
+        <slot></slot>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style lang="scss" scoped>
+.headwarp{
+ padding: 0 10px !important ;
+}
+.headwarp-top{
+ 
+}
+.headwarp-bottom {
+  display: flex;
+  height: 100%;
+  .warpmenu{
+     display: flex;
+     justify-content: center;
+     align-items: center;
+  }
+}
+
+// 右侧用户信息
+.top_right {
+  position: absolute;
+  right: 10px;
+  top: 0px;
+  height: 100%;
+  /*width:400px;*/
+  color: #fff; // #8c8c8c;
+  font-size: 14px;
+  margin-right: 10px;
+
+  a {
+    color: #fff; // #8c8c8c;
+    margin: 10px 8px 0 5px;
+    cursor: pointer;
+  }
+}
+
+.top_search {
+  border-radius: 30px;
+  width: 180px;
+  float: right;
+  padding-top: 10px;
+  padding-right: 20px;
+
+  :deep(.el-input__wrapper) {
+    border-radius: 20px;
+  }
+}
+</style>