Home Explore Help
Register Sign In
shaogen1995
/
changshuBWG
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

静态页面完工

shaogen1995 4 years ago
parent
88c1e2cbfa
commit
7b80483712
7 changed files with 325 additions and 29 deletions
Split View Show Diff Stats
  1. 1 1
      index.html
  2. BIN
      src/assets/img/666.png
  3. 1 1
      src/pages/layout/aside.vue
  4. 125 0
      src/pages/scene/addScene.vue
  5. 95 13
      src/pages/scene/index.vue
  6. 96 14
      src/pages/video/index.vue
  7. 7 0
      src/router/index.js

+ 1 - 1
index.html
View File 

@@ -8,7 +8,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 
     <link rel="apple-touch-icon" sizes="180x180" href="static/img/favicon.ico">
 
     <link rel="icon" type="image/png" href="static/img/favicon.ico" sizes="192x192">
 
-    <title>河南博物院</title>
 
+    <title>常熟博物院</title>
 
   </head>
 
   <body>
 
     <div id="app"></div>

BIN
src/assets/img/666.png
View File


+ 1 - 1
src/pages/layout/aside.vue
View File 

@@ -10,7 +10,7 @@
 
     <div class="aside-item">
 
       <div><img :src="require('@/assets/img/02fb.png')">工作管理</div>
 
       <!-- <div @click="go(2,'/information')" :class="{active:activeIdx === 2}">资讯管理</div> -->
 
-      <div @click="go(3,'/display')" :class="{active:activeIdx === 3}">展示管理</div>
 
+      <!-- <div @click="go(3,'/display')" :class="{active:activeIdx === 3}">展示管理</div> -->
 
       <div @click="go(4,'/cultural-relic')" :class="{active:activeIdx === 4}">文物库</div>
 
       <div @click="go(11,'/scene')" :class="{active:activeIdx === 11}">场景管理</div>
 
       <div @click="go(12,'/video')" :class="{active:activeIdx === 12}">视频管理</div>

+ 125 - 0
src/pages/scene/addScene.vue
View File 

@@ -0,0 +1,125 @@
 
+<!--  -->
 
+<template>
 
+  <div class="addScene">
 
+    <MainTop :crumb="[{ name: '场景管理 > 新增场景' }]" />
 
+    <div class="table-interface" style="flex: 1">
 
+      <div class="top-body">
 
+        <div class="conten">
 
+          <el-form
 
+            :model="ruleForm"
 
+            :rules="rules"
 
+            ref="ruleForm"
 
+            label-width="100px"
 
+            class="demo-ruleForm"
 
+          >
 
+            <el-form-item label="场景名称" prop="name">
 
+              <el-input
 
+                v-model="ruleForm.name"
 
+                placeholder="请输入场景名称"
 
+                style="width: 220px; margin-right: 10px"
 
+              ></el-input>
 
+            </el-form-item>
 
+            <el-form-item label="场景链接" prop="join">
 
+              <el-input
 
+                v-model="ruleForm.join"
 
+                placeholder="请输入场景链接"
 
+                style="width: 220px; margin-right: 10px"
 
+              ></el-input>
 
+            </el-form-item>
 
+
 
+            <el-form-item label="展示封面：" style="margin-left: 15px">
 
+              <!-- style="border: 1px dotted #ccc; width:178px;   border-radius: 5px;" -->
 
+              <Cropper
 
+                :width="512"
 
+                :height="512"
 
+                :fixed-number="[1, 1]"
 
+                :uploadUrl="'/exhibition/upload'"
 
+                :img="ruleForm.pic"
 
+                @clearImg="ruleForm.pic = ''"
 
+                @subUploadSucceed="getShopImages"
 
+              />
 
+              <span class="wwtxt" style="color: #c0c4cc"
 
+                >建议上传512*512的png格式图片</span
 
+              >
 
+            </el-form-item>
 
+          </el-form>
 
+        </div>
 
+        <el-button type="primary" @click="add" style="margin-left: 50px">新增</el-button>
 
+        <el-button>重置</el-button>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import MainTop from '@/components/main-top'
 
+import Cropper from '@/components/cropper'
 
+
 
+export default {
 
+  name: 'AddScene',
 
+  components: {
 
+    MainTop,
 
+    Cropper
 
+  },
 
+  data () {
 
+    // 这里存放数据
 
+    return {
 
+      ruleForm: {
 
+        name: '',
 
+        pic: '',
 
+        join: ''
 
+      },
 
+      rules: {
 
+        name: [{ required: true, message: '请输入场景名称', trigger: 'blur' }],
 
+        join: [{ required: true, message: '请输入场景链接', trigger: 'blur' }]
 
+      }
 
+    }
 
+  },
 
+  // 监听属性 类似于data概念
 
+  computed: {},
 
+  // 监控data中的数据变化
 
+  watch: {},
 
+  // 方法集合
 
+  methods: {
 
+    getShopImages (img) {
 
+      console.log(999999, img)
 
+      this.ruleForm.pic = img
 
+    },
 
+    add () {}
 
+  },
 
+  // 生命周期 - 创建完成（可以访问当前this实例）
 
+  created () {},
 
+  // 生命周期 - 挂载完成（可以访问DOM元素）
 
+  mounted () {},
 
+  beforeCreate () {}, // 生命周期 - 创建之前
 
+  beforeMount () {}, // 生命周期 - 挂载之前
 
+  beforeUpdate () {}, // 生命周期 - 更新之前
 
+  updated () {}, // 生命周期 - 更新之后
 
+  beforeDestroy () {}, // 生命周期 - 销毁之前
 
+  destroyed () {}, // 生命周期 - 销毁完成
 
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
 
+}
 
+</script>
 
+<style scoped>
 
+.addScene {
 
+  display: flex;
 
+  flex-direction: column;
 
+}
 
+.table-interfac {
 
+  overflow-y: auto;
 
+  overflow-x: hidden;
 
+  height: calc(100% - 3rem);
 
+}
 
+.top-body {
 
+  padding: 24px;
 
+  height: 100%;
 
+  margin: 1rem 0;
 
+}
 
+.conten {
 
+  padding-top: 10px;
 
+  width: 100%;
 
+  height: 380px;
 
+  border: 1px solid #ccc;
 
+  margin-bottom: 30px;
 
+}
 
+</style>

+ 95 - 13
src/pages/scene/index.vue
View File 

@@ -1,18 +1,67 @@
 
 <template>
 
-<div class='scene'>
 
-  <h1>scene</h1>
 
-</div>
 
+  <div class="scene">
 
+    <MainTop :crumb="[{ name: '场景管理' }]" />
 
+    <div class="table-interface">
 
+      <div class="top-body">
 
+        <div class="info-top">
 
+          <el-form
 
+            :model="ruleForm"
 
+            :rules="rules"
 
+            ref="ruleForm"
 
+            label-width="0px"
 
+            class="demo-ruleForm"
 
+          >
 
+            <el-form-item label="" prop="name">
 
+              <el-input
 
+                v-model="ruleForm.name"
 
+                placeholder="请输入场景名称搜索"
 
+                style="width: 220px; margin-right: 10px;"
 
+              ></el-input>
 
+              <el-button type="primary" @click="handleSearchBtnClick"
 
+                >查找</el-button
 
+              >
 
+              <el-button>重置</el-button>
 
+                    <el-button style="float: right;" type="primary" @click="$router.push('/scene/addScene')"
 
+                >新增场景</el-button
 
+              >
 
+            </el-form-item>
 
+          </el-form>
 
+        </div>
 
+        <div class="conten">
 
+          <div class="box" v-for="i in 6" :key="i">
 
+            <img src="../../assets/img/666.png" alt="">
 
+            <div class="txt">
 
+              <p>场景名称</p>
 
+                <div>
 
+                  <span>编辑</span>
 
+                  <span>删除</span>
 
+                </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
 </template>
 
 
 <script>
 
+import MainTop from '@/components/main-top'
 
 
 export default {
 
   name: 'Scene',
 
-  components: {},
 
+  components: {
 
+    MainTop
 
+  },
 
   data () {
 
     // 这里存放数据
 
     return {
 
-
 
+      ruleForm: {
 
+        name: ''
 
+      },
 
+      rules: {
 
+        name: [
 
+        ]
 
+      }
 
     }
 
   },
 
   // 监听属性 类似于data概念
 
@@ -21,16 +70,14 @@ export default {
 
   watch: {},
 
   // 方法集合
 
   methods: {
 
-
 
+    handleSearchBtnClick () {
 
+      console.log(111)
 
+    }
 
   },
 
   // 生命周期 - 创建完成（可以访问当前this实例）
 
-  created () {
 
-
 
-  },
 
+  created () {},
 
   // 生命周期 - 挂载完成（可以访问DOM元素）
 
-  mounted () {
 
-
 
-  },
 
+  mounted () {},
 
   beforeCreate () {}, // 生命周期 - 创建之前
 
   beforeMount () {}, // 生命周期 - 挂载之前
 
   beforeUpdate () {}, // 生命周期 - 更新之前
 
@@ -41,5 +88,40 @@ export default {
 
 }
 
 </script>
 
 <style scoped>
 
-
 
+.table-interfac {
 
+  overflow-y: auto;
 
+  overflow-x: hidden;
 
+  height: calc(100% - 3rem);
 
+}
 
+.top-body {
 
+  margin: 1rem 0;
 
+}
 
+.info-top {
 
+  padding: 20px 70px 20px 36px;
 
+  width: 100%;
 
+  border-bottom: 1px #a5a5a5 solid;
 
+}
 
+.conten {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  width: 100%;
 
+  min-height: 376px;
 
+  padding: 25px;
 
+}
 
+.box {
 
+  width: 20%;
 
+  height: 205px;
 
+}
 
+.box img {
 
+  width: 90%;
 
+  max-height: 150px;
 
+}
 
+.txt {
 
+  margin-top: 18px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+.txt>div {
 
+  padding-right: 30px;
 
+}
 
 </style>

+ 96 - 14
src/pages/video/index.vue
View File 

@@ -1,18 +1,67 @@
 
 <template>
 
-<div class='video'>
 
-  <h1>video</h1>
 
-</div>
 
+  <div class="scene">
 
+    <MainTop :crumb="[{ name: '视频管理' }]" />
 
+    <div class="table-interface">
 
+      <div class="top-body">
 
+        <div class="info-top">
 
+          <el-form
 
+            :model="ruleForm"
 
+            :rules="rules"
 
+            ref="ruleForm"
 
+            label-width="0px"
 
+            class="demo-ruleForm"
 
+          >
 
+            <el-form-item label="" prop="name">
 
+              <el-input
 
+                v-model="ruleForm.name"
 
+                placeholder="请输入视频名称搜索"
 
+                style="width: 220px; margin-right: 10px;"
 
+              ></el-input>
 
+              <el-button type="primary" @click="handleSearchBtnClick"
 
+                >查找</el-button
 
+              >
 
+              <el-button>重置</el-button>
 
+                    <el-button style="float: right;" type="primary" @click="$router.push('/scene/addVideo')"
 
+                >新增视频</el-button
 
+              >
 
+            </el-form-item>
 
+          </el-form>
 
+        </div>
 
+        <div class="conten">
 
+          <div class="box" v-for="i in 6" :key="i">
 
+            <img src="../../assets/img/666.png" alt="">
 
+            <div class="txt">
 
+              <p>视频名称</p>
 
+                <div>
 
+                  <span>编辑</span>
 
+                  <span>删除</span>
 
+                </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
 </template>
 
 
 <script>
 
+import MainTop from '@/components/main-top'
 
 
 export default {
 
-  name: 'Video',
 
-  components: {},
 
+  name: 'Scene',
 
+  components: {
 
+    MainTop
 
+  },
 
   data () {
 
     // 这里存放数据
 
     return {
 
-
 
+      ruleForm: {
 
+        name: ''
 
+      },
 
+      rules: {
 
+        name: [
 
+        ]
 
+      }
 
     }
 
   },
 
   // 监听属性 类似于data概念
 
@@ -21,16 +70,14 @@ export default {
 
   watch: {},
 
   // 方法集合
 
   methods: {
 
-
 
+    handleSearchBtnClick () {
 
+      console.log(111)
 
+    }
 
   },
 
   // 生命周期 - 创建完成（可以访问当前this实例）
 
-  created () {
 
-
 
-  },
 
+  created () {},
 
   // 生命周期 - 挂载完成（可以访问DOM元素）
 
-  mounted () {
 
-
 
-  },
 
+  mounted () {},
 
   beforeCreate () {}, // 生命周期 - 创建之前
 
   beforeMount () {}, // 生命周期 - 挂载之前
 
   beforeUpdate () {}, // 生命周期 - 更新之前
 
@@ -41,5 +88,40 @@ export default {
 
 }
 
 </script>
 
 <style scoped>
 
-
 
+.table-interfac {
 
+  overflow-y: auto;
 
+  overflow-x: hidden;
 
+  height: calc(100% - 3rem);
 
+}
 
+.top-body {
 
+  margin: 1rem 0;
 
+}
 
+.info-top {
 
+  padding: 20px 70px 20px 36px;
 
+  width: 100%;
 
+  border-bottom: 1px #a5a5a5 solid;
 
+}
 
+.conten {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  width: 100%;
 
+  min-height: 376px;
 
+  padding: 25px;
 
+}
 
+.box {
 
+  width: 20%;
 
+  height: 205px;
 
+}
 
+.box img {
 
+  width: 90%;
 
+  max-height: 150px;
 
+}
 
+.txt {
 
+  margin-top: 18px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+.txt>div {
 
+  padding-right: 30px;
 
+}
 
 </style>

+ 7 - 0
src/router/index.js
View File 

@@ -13,6 +13,7 @@ import Modify from '@/pages/modify'
 
 import Role from '@/pages/role'
 
 import Device from '@/pages/device'
 
 import Scene from '@/pages/scene'
 
+import AddScene from '../pages/scene/addScene.vue'
 
 import Video from '@/pages/video'
 
 
 import editInformation from '@/pages/editPages/message'
 
@@ -150,6 +151,12 @@ export default new Router({
 
           component: Scene,
 
           meta: {index: 11}
 
         },
 
+        {
 
+          path: '/scene/addScene',
 
+          name: 'addScene',
 
+          component: AddScene,
 
+          meta: {index: 11}
 
+        },
 
         // 视频管理
 
         {
 
           path: '/video',