gengxin

src/components/HelloWorld.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/pagination.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="pagination">
+    <el-row type="flex" align="middle" style="padding-top:1rem">
+      <el-col :span="24" :style="`text-align:${position};`">
+        <el-pagination
+          background
+          layout="sizes, total, prev, pager, next"
+          :total="total"
+          :page-size="limit"
+          :current-page.sync="currentPage"
+          @current-change="changePage"
+        >
+        </el-pagination>
+        <!-- 
+          :page-sizes="[5, 10, 15, 20, 50, 100]"
+          @size-change="sizeChange"
+         -->
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+export default {
+  name: 'pagination',
+  props: {
+    position: { type: String, default: 'right' },
+    total: { type: Number, default: 0 },
+  },
+  components: {},
+  data: () => {
+    return {
+      currentPage: 1,
+      limit: _.get(this, `$limit`, undefined) !== undefined ? this.$limit : process.env.VUE_APP_LIMIT * 1,
+    };
+  },
+  created() {},
+  methods: {
+    changePage(page) {
+      this.$emit('query', { skip: (page - 1) * this.limit, limit: this.limit });
+    },
+    sizeChange(limit) {
+      this.limit = limit;
+      this.$emit('query', { skip: 0, limit: this.limit });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/components/upload.vue

@@ -0,0 +1,119 @@
+<template>
+  <div id="upload">
+    <el-upload
+      v-if="url"
+      ref="upload"
+      :action="url"
+      :list-type="listType"
+      :file-list="fileList"
+      :limit="limit"
+      :on-exceed="outLimit"
+      :on-preview="handlePictureCardPreview"
+      :before-remove="handleRemove"
+      :on-success="onSuccess"
+      :before-upload="beforeUpload"
+      :show-file-list="showList"
+      :accept="accept"
+    >
+      <el-button size="small" type="primary" v-if="isBtn">点击上传</el-button>
+      <template v-else-if="uploadBtn">
+        <el-button type="danger">选择文件</el-button>
+      </template>
+      <template v-else>
+        <i class="el-icon-plus"></i>
+      </template>
+      <template #tip v-if="tip">
+        {{ tip }}
+      </template>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+export default {
+  name: 'upload',
+  props: {
+    url: { type: null },
+    limit: { type: Number },
+    data: { type: null },
+    type: { type: String },
+    isBtn: { type: Boolean, default: false },
+    uploadBtn: { type: Boolean, default: false },
+    showList: { type: Boolean, default: true },
+    accept: { type: String, default: '' },
+    tip: { type: String, default: undefined },
+    listType: { type: String, default: 'picture-card' },
+  },
+  components: {},
+  data: () => ({
+    dialogVisible: false,
+    dialogImageUrl: '',
+    fileList: [],
+  }),
+  created() {
+    if (this.data) {
+      this.defalutProcess(this.data);
+    }
+  },
+  watch: {
+    data: {
+      handler(val) {
+        this.defalutProcess(val);
+      },
+    },
+  },
+  computed: {},
+  methods: {
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = false;
+    },
+    handleRemove(file, fileList) {
+      let index = fileList.findIndex(f => _.isEqual(f, file));
+      this.$emit('delete', index);
+      return false;
+    },
+    outLimit() {
+      this.$message.error(`只允许上传${this.limit}个文件`);
+    },
+    onSuccess(response, file, fileList) {
+      //将文件整理好传回父组件
+      this.$emit('upload', { type: this.type, data: { ...response, name: file.name } });
+    },
+    beforeUpload(file) {
+      const sizeLimit = file.size / 1024 / 1024 < 10;
+      if (sizeLimit) return true;
+      else {
+        this.$message.error('文件超出10M！');
+        return false;
+      }
+    },
+    defalutProcess(val) {
+      if (_.isArray(val)) {
+        let newArr = val.map(item => {
+          let object = {};
+          object.name = item.name;
+          object.url = item.url;
+          return object;
+        });
+        this.$set(this, `fileList`, newArr);
+      } else if (_.isObject(val)) {
+        let object = {};
+        if (_.get(val, `url`)) {
+          object.name = val.name;
+          object.url = val.url;
+          this.$set(this, `fileList`, [object]);
+        }
+      } else if (typeof val === 'string') {
+        this.$set(this, `fileList`, [{ name: '附件', url: val }]);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/components/wang-editor.vue

@@ -0,0 +1,87 @@
+<template>
+  <div ref="editor" style="text-align:left;"></div>
+</template>
+<script>
+import E from 'wangeditor';
+
+const menus = [
+  'head', // 标题
+  'bold', // 粗体
+  'fontSize', // 字号
+  'fontName', // 字体
+  'italic', // 斜体
+  'underline', // 下划线
+  'strikeThrough', // 删除线
+  'foreColor', // 文字颜色
+  'backColor', // 背景颜色
+  'link', // 插入链接
+  'list', // 列表
+  'justify', // 对齐方式
+  'quote', // 引用
+  // 'emoticon', // 表情
+  'table', // 表格
+  // 'video', // 插入视频
+  // 'code', // 插入代码
+  'undo', // 撤销
+  'redo', // 重复
+];
+
+export default {
+  name: 'wang-editor',
+  model: {
+    prop: 'value',
+    event: 'change', // 默认为input时间，此处改为change
+  },
+  props: {
+    value: { type: String, required: false, default: '' },
+  },
+  data() {
+    return {
+      editorContent: this.value,
+      editor: undefined,
+    };
+  },
+  mounted() {
+    var editor = new E(this.$refs.editor);
+    editor.customConfig.onchange = html => {
+      this.editorContent = html;
+      this.$emit('change', html);
+    };
+    // 自定义菜单配置
+    editor.customConfig.menus = menus;
+    editor.customConfig.zIndex = 0;
+    editor.customConfig.uploadImgServer = '/files/chat/images/upload';
+    editor.customConfig.uploadImgMaxLength = 1;
+    editor.customConfig.uploadImgHooks = {
+      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
+      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
+      customInsert: function(insertImg, result, editor) {
+        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
+        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
+
+        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
+        var url = result.uri;
+        insertImg(url);
+
+        // result 必须是一个 JSON 格式字符串！！！否则报错
+      },
+    };
+    editor.create();
+    editor.txt.html(this.value);
+    this.$set(this, `editor`, editor);
+  },
+  methods: {
+    getContent: function() {
+      return this.editorContent;
+    },
+    setContent() {
+      this.editor.txt.clear();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.w-e-text-container {
+  height: 200px !important;
+}
+</style>

src/layout/live/foot.vue

@@ -0,0 +1,44 @@
+<template>
+  <div id="foot">
+    <div class="w_0100">
+      <div class="superdown">
+        <div class="w_1200">
+          <p>版权所有：吉林省技术算中心</p>
+          <p>
+            <span>技术支持：长春福瑞科技有限公司</span>
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>邮编：130000</span>
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>传真：239823982</span>
+          </p>
+          <p>
+            <span>地址：吉林省长春市朝阳区前进大街1244号</span>
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>电话：0134-1234567</span>
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>邮箱：123456@163.com</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'foot',
+  props: {},
+  components: {},
+  data: () => {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {},
+};
+</script>
+
+<style lang="less" scoped>
+@import '~@/style/style.css';
+</style>

src/layout/live/frame.vue

@@ -0,0 +1,32 @@
+<template>
+  <div id="frame">
+    <div class="pz_banner">
+      <live-head></live-head>
+    </div>
+    <div class="pz_main">
+      <router-view></router-view>
+    </div>
+    <div class="pz_down">
+      <live-foot></live-foot>
+    </div>
+  </div>
+</template>
+
+<script>
+import liveHead from '@/layout/live/head.vue';
+import liveFoot from '@/layout/live/foot.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'frame',
+  props: {},
+  components: { liveHead, liveFoot },
+  data: () => {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/layout/live/head.vue

@@ -0,0 +1,92 @@
+<template>
+  <div id="heads">
+    <div class="w_0100">
+      <div class="superbanner">
+        <img :src="top_bg" />
+      </div>
+      <div class="supertop">
+        <div class="w_1200">
+          <p>
+            欢迎来到吉林省计算中心科技平台
+          </p>
+          <p v-if="user && user.uid">
+            {{ user.name }}
+          </p>
+          <p v-else>
+            <button type="button">登录</button>
+            <button type="button">注册</button>
+          </p>
+        </div>
+      </div>
+      <div class="superlogo">
+        <div class="w_1200">
+          <a href="home">
+            <img :src="logo" />
+            <span>
+              吉林省计算中心科技平台
+            </span>
+          </a>
+        </div>
+      </div>
+      <div class="supermenu">
+        <div class="w_1200">
+          <div class="info">
+            <ul>
+              <!-- <li :class="isTab('index') ? 'active' : ''">
+                <a @click="turnTo('home')" target="">首页</a>
+              </li> -->
+              <li class="">
+                <a href="/static/liveIndex.html" target="_blank">直播大厅</a>
+              </li>
+              <li :class="isTab('market') ? 'active' : ''">
+                <a @click="turnTo('market')" target="">科技超市</a>
+              </li>
+              <li :class="isTab('service') ? 'active' : ''">
+                <a @click="turnTo('service')" target="">创新服务</a>
+              </li>
+              <li :class="isTab('dynamic') ? 'active' : ''">
+                <a @click="turnTo('dynamic')" target="">动态监测</a>
+              </li>
+              <li :class="isTab('technical') ? 'active' : ''">
+                <a @click="turnTo('technical')" target="">技术培训</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'heads',
+  props: {},
+  components: {},
+  data: () => {
+    return {
+      top_bg: require('@/assets/live/top_bg.png'),
+      logo: require('@/assets/live/logo.png'),
+    };
+  },
+  created() {},
+  methods: {
+    turnTo(type) {
+      if (type == 'index') {
+        console.log('首页未出');
+      } else if (type == 'hall_index') this.$router.push({ path: '/live/hall/index' });
+      else this.$router.push({ path: `/live/${type}` });
+    },
+    isTab(type) {
+      if (type == 'index') return this.$route.path.includes('/live/index');
+      else return this.$route.path.includes(`/live/${type}`);
+    },
+  },
+  computed: {},
+};
+</script>
+
+<style lang="less" scoped>
+@import '~@/style/style.css';
+</style>

src/main.js

@@ -1,23 +1,23 @@
-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
-import "@/plugins/element.js";
-import "@/plugins/axios";
-import "@/plugins/check-res";
-import "@/plugins/meta";
-import "@/plugins/filters";
-import "@/plugins/loading";
-import "@/plugins/var";
-import "@/plugins/methods";
-import "@/plugins/setting";
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+import '@/plugins/element.js';
+import '@/plugins/axios';
+import '@/plugins/check-res';
+import '@/plugins/meta';
+import '@/plugins/filters';
+import '@/plugins/loading';
+import '@/plugins/var';
+import '@/plugins/methods';
+import '@/plugins/setting';
 Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
-  render: (h) => h(App),
-}).$mount("#app");
+  render: h => h(App),
+}).$mount('#app');
 window.vm = new Vue({
   router,
 });

src/router/index.js

@@ -2,15 +2,23 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 Vue.use(VueRouter);
-
-const routes = [
+const live = [
   {
-    path: '/',
-    name: '',
+    path: '/live',
+    name: 'live',
     component: () => import('../views/index.vue'),
+    children: [
+      {
+        path: '/test',
+        name: 'live_test',
+        component: () => import('../views/test.vue'),
+      },
+    ],
   },
 ];
 
+const routes = [...live];
+
 const router = new VueRouter({
   routes,
 });

src/store/index.js

@@ -1,5 +1,5 @@
-import Vue from "vue";
-import Vuex from "vuex";
+import Vue from 'vue';
+import Vuex from 'vuex';
 
 Vue.use(Vuex);
 
@@ -7,5 +7,5 @@ export default new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},
-  modules: {}
+  modules: {},
 });

src/style/style.css

@@ -0,0 +1,297 @@
+@charset 'UTF-8';
+
+html {
+	overflow-x: auto;
+	overflow-y: auto;
+}
+
+* {
+	padding: 0;
+	margin: 0;
+	outline: none !important;
+}
+
+ul,
+ol,
+li {
+	list-style-type: none;
+}
+
+body,
+button,
+input,
+select,
+textarea {
+	font-family: 'Microsoft yahei';
+	font-size: 12px;
+}
+
+code,
+kbd,
+pre,
+samp {
+	font-family: 'Microsoft yahei';
+}
+
+a {
+	text-decoration: none;
+	color: #333;
+	cursor: pointer;
+	-webkit-transition: all 0.2s ease-out 0s;
+	-moz-transition: all 0.2s ease-out 0s;
+	-o-transition: all 0.2s ease-out 0s;
+	transition: all 0.2s ease-out 0s;
+}
+
+img {
+	border: 0;
+	max-width: 100%;
+	max-height: 100%;
+	vertical-align: middle;
+}
+
+li {
+	line-height: normal;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin: 0;
+	font-weight: normal;
+	font-family: 'Microsoft yahei';
+}
+
+input,
+table,
+tr,
+td {
+	margin: 0;
+	padding: 0;
+	border: none;
+}
+
+button,
+table {
+	border: none;
+	background: none;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	position: relative;
+	float: left;
+	width: 100%;
+	overflow: hidden;
+}
+
+select {
+	margin: 0;
+	padding: 0;
+	font-family: 'Microsoft yahei';
+	border: none;
+}
+
+textarea {
+	resize: none;
+	outline: none;
+}
+
+label {
+	margin-bottom: 0;
+	font-weight: normal;
+}
+
+input,
+select,
+textarea {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: none;
+	-moz-border-radius: 0px;
+	-webkit-border-radius: 0;
+	-khtml-border-radius: 0;
+	border-radius: 0;
+}
+
+p {
+	margin: 0 !important;
+}
+
+.textOver {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.pz_top {
+	float: left;
+	width: 100%;
+	min-width: 1200px;
+	z-index: 101;
+	position: relative;
+}
+
+.pz_banner {
+	float: left;
+	width: 100%;
+	min-width: 1200px;
+	position: relative;
+	overflow: hidden;
+}
+
+.pz_main {
+	float: left;
+	width: 100%;
+	min-width: 1200px;
+	position: relative;
+}
+
+.pz_down {
+	float: left;
+	width: 100%;
+	min-width: 1200px;
+}
+
+.pz_menu {
+	float: left;
+	width: 100%;
+	min-width: 1200px;
+}
+
+.w_0100 {
+	float: left;
+	width: 100%;
+}
+
+.w_1200 {
+	margin: 0 auto;
+	width: 1200px;
+}
+
+
+/* 科技超市开始 */
+.superbanner {
+	position: relative;
+	height: 250px;
+	overflow: hidden;
+}
+
+.superbanner img {
+	width: 100%;
+	height: 250px;
+	overflow: hidden;
+}
+
+.supertop {
+	position: absolute;
+	top: 0;
+	height: 40px;
+	width: 100%;
+	color: #fff;
+	background: #2152991f;
+}
+
+.supertop p:first-child {
+	float: left;
+	height: 40px;
+	line-height: 40px;
+	font-size: 16px;
+}
+
+.supertop p:last-child {
+  float: right;
+  height: 40px;
+  line-height: 40px;
+  font-size: 20px;
+  color: #000;
+  font-weight: bold;
+  font-family: cursive;
+}
+
+.supertop p:last-child button {
+	color: #fff;
+}
+
+.superlogo {
+	position: absolute;
+	top: 40px;
+	width: 100%;
+	padding: 50px 0 0 0;
+}
+
+.superlogo img {
+	width: 76px;
+	height: 64px;
+	overflow: hidden;
+}
+
+.superlogo span {
+	color: #2d64b3;
+	font-size: 36px;
+	font-family: cursive;
+	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+	font-weight: 600;
+	position: relative;
+	top: 10px;
+	padding: 0 0 0 10px;
+}
+
+.supermenu {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	height: 50px;
+}
+
+.supermenu .info {
+	height: 50px;
+	line-height: 50px;
+	background: #0085d2;
+}
+
+.supermenu .info ul li {
+	float: left;
+	height: 50px;
+	line-height: 50px;
+	padding: 0 82px;
+	font-size: 20px;
+	border-right: 1px solid #76bdfe;
+}
+
+.supermenu .info ul .active {
+	background-color: #fe950e;
+}
+
+.supermenu .info ul li a {
+	color: #fff;
+}
+
+.supermenu .info ul li:last-child {
+	border-right: 0;
+	padding: 0 70px;
+}
+.superdown {
+	padding: 15px 0 0 0;
+	height: 135px;
+	overflow: hidden;
+	background-color: #3a3637;
+	color: #fff;
+}
+
+.superdown p {
+	font-size: 14px;
+	color: #999999;
+	font-family: 微软雅黑;
+	padding: 10px 200px;
+}

src/views/index.vue

@@ -1,18 +1,22 @@
 <template>
   <div id="index">
-    <p>index</p>
+    <frame></frame>
   </div>
 </template>
 
 <script>
+import frame from '@/layout/live/frame.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: {},
-  data: () => ({}),
+  components: { frame },
+  data: () => {
+    return {};
+  },
   created() {},
-  computed: {},
   methods: {},
+  computed: {},
 };
 </script>
 

src/views/test.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="test">
+    <p>test</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'test',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>