first commit

2026-09-08 19:49:21 +08:00
commit ebffbab428
7320 changed files with 1477614 additions and 0 deletions
@@ -0,0 +1,146 @@
+<template>
+  <div class="guava-main-content">
+    <div v-show="v==='index'" key="index" class="transition-item">
+      <slot></slot>
+    </div>
+
+    <el-card v-show="v==='edit'" key="edit" shadow="never" class="animated-card">
+      <template #header>
+        <el-row type="flex">
+          <el-col :span="12">
+            <el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="v='index'">返回</el-button>
+          </el-col>
+          <el-col :span="12" class="text-right">
+            <slot name="edit_func"></slot>
+          </el-col>
+        </el-row>
+      </template>
+      <div :class="{'card_scroll':edit_scroll}">
+        <slot name="edit"></slot>
+      </div>
+    </el-card>
+
+    <el-card v-show="v==='view'" key="view" shadow="never" class="animated-card">
+      <template #header>
+        <el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="v='index'">返回</el-button>
+      </template>
+      <div :class="{'card_scroll':edit_scroll}">
+        <slot name="view"></slot>
+      </div>
+    </el-card>
+
+    <el-card v-show="v==='public'" key="public" shadow="never" class="animated-card">
+      <div slot="header" class="clearfix">
+        <el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="back()">返回
+        </el-button>
+      </div>
+      <div>
+        <slot name="public"></slot>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  props: {
+    value: {
+      type: String,
+      default: 'index'
+    },
+    //为true的时候页面不会滚动 card-body滚动 edit view 自己来控制
+    edit_scroll: {
+      type: Boolean,
+      default: true
+    },
+    view_scroll: {
+      type: Boolean,
+      default: true
+    },
+  },
+  data() {
+    return {
+      v: 'index',
+    }
+  },
+  watch: {
+    v(newValue, oldValue) {
+      this.$emit('vchange', {newValue, oldValue})
+      this.$emit('input', newValue)
+    }
+  },
+  methods: {
+    index() {
+      this.v = 'index'
+    },
+    edit() {
+      this.v = 'edit'
+    },
+    view() {
+      this.v = 'view'
+    },
+    public() {
+      this.v = 'public'
+    },
+    back() {
+      this.v = 'index'
+    }
+  }
+}
+</script>
+
+<style>
+
+.guava-main-content {
+  padding: 10px 12px;
+  background-color: #f6f6f6;
+  min-height: 100%;
+}
+
+.animated-card {
+  animation-name: cardAnimation;
+  animation-duration: .5s;
+  animation-fill-mode: both;
+}
+
+@keyframes cardAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.el-card__header {
+  padding: 5px 20px !important;
+}
+
+.el-tabs--border-card {
+  box-shadow: unset !important;
+}
+
+.card_scroll {
+  max-height: calc(100vh - 50px - 20px - 54px - 40px - 5px);
+  overflow-y: scroll;
+}
+
+.card_scroll {
+  overflow: scroll;
+}
+
+.card_scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.card_scroll::-webkit-scrollbar-vertical {
+  display: none;
+}
+
+.card_scroll::-webkit-scrollbar-horizontal {
+  display: none;
+}
+
+</style>