Xuyan-cmd · Xuyan-cmd · Jul 11, 2022 · Jul 11, 2022 · Jul 11, 2022 · Jul 11, 2022
diff --git a/Front-end-project/.browserslistrc b/Front-end-project/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/Front-end-project/.gitignore b/Front-end-project/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Front-end-project/babel.config.js b/Front-end-project/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/Front-end-project/package-lock.json b/Front-end-project/package-lock.json
diff --git a/Front-end-project/package.json b/Front-end-project/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "cloudspace",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "clipboard": "^2.0.8",
+    "core-js": "^3.14.0",
+    "element-ui": "^2.15.2",
+    "qs": "^6.10.1",
+    "vue": "^2.6.13",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-router": "^4.5.13",
+    "@vue/cli-plugin-vuex": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "less": "^3.13.1",
+    "less-loader": "^5.0.0",
+    "vue-template-compiler": "^2.6.13"
+  },
+  "author": "CodeMan",
+  "license": "MIT"
+}
diff --git a/Front-end-project/public/favicon.ico b/Front-end-project/public/favicon.ico
diff --git a/Front-end-project/public/index.html b/Front-end-project/public/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <meta name="referrer" content="no-referrer" />
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>
+    中传放心传
+  </title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+<style>
+  html,
+  body {
+    /* 禁止页面滚动 */
+    overflow-y: hidden;
+    height: 100%;
+    min-width: 1260px;
+    min-height: 400px;
+  }
+</style>
+
+</html>
diff --git a/Front-end-project/src/App.vue b/Front-end-project/src/App.vue
@@ -0,0 +1,14 @@
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App",
+};
+</script>
+
+<style lang="less">
+</style>
diff --git a/Front-end-project/src/assets/css/base.css b/Front-end-project/src/assets/css/base.css
@@ -0,0 +1,23 @@
+/* iconfont */
+@import 'https://at.alicdn.com/t/font_2594789_b8tpbi3b8yk.css?spm=a313x.7781069.1998910419.47&file=font_2594789_b8tpbi3b8yk.css';
+
+@import './normalize.css';
+
+@import './element.css';
+
+input:focus {
+  border:1px solid #1e9fd2 !important;
+  outline: none;
+}
+
+input {
+  color: rgb(65, 65, 65);
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+}
+*::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #ccc;
+}
diff --git a/Front-end-project/src/assets/css/element.css b/Front-end-project/src/assets/css/element.css
@@ -0,0 +1,121 @@
+.el-popover {
+    min-width: 50px !important;
+    padding: 0;
+  border: 1px solid #1e9fd2;
+  overflow: hidden;
+}
+
+.el-slider__bar {
+    background-color: #1e9fd2;
+}
+
+.el-slider__runway {
+    margin: 0;
+}
+
+.el-slider__button {
+    border: 2px solid #1e9fd2;
+    width: 10px;
+    height: 10px;
+}
+
+.el-button:focus {
+    background-color: unset !important;
+    color:#606266 !important;
+    border: 1px solid #ccc !important;
+}
+
+/* .el-dialog {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  } */
+
+  .el-main {
+      padding: 0;
+  }
+
+  .el-dialog__close:hover {
+    color: #1e9fd2 !important;
+  }
+
+.el-button:hover {
+    background-color: #1e9fd2;
+    color: white;
+    border: 1px solid #1e9fd2;
+  }
+
+.el-button:focus {
+    background-color: #fff !important;
+    color: #606266 !important;
+    border: 1px solid #dcdfe6 !important;
+  }
+
+.el-button--primary {
+    background-color: #1e9fd2;
+    border: 1px solid #1e9fd2;
+  }
+
+.el-button--primary:focus {
+    background-color: #1e9fd2 !important;
+    color: white !important;
+    border: 1px solid #1e9fd2 !important;
+  }
+
+.el-input__inner:focus{
+    border-color:#1e9fd2;
+}
+
+/* dragImgContainer的样式，因为vue中的scoped会导致后插入的样式无效 */
+.dragImgContainer {
+    height: 90px;
+    width: 90px;
+    position: fixed;
+    display: none;
+    z-index: 5000;
+    user-select: none;
+  }
+
+  .showDragImgContainer {
+    display: block;
+  }
+
+  .dragImgContainer img, .dragImgContainer video{
+    max-height: 80%;
+    max-width: 80%;
+    position: absolute;
+    transform-origin: 50% 100%;
+    border-radius: 5px;
+  }
+
+  .dragImgContainer img:nth-child(1),.dragImgContainer video:nth-child(1) {
+    z-index: 10;
+  }
+
+  .dragImgContainer img:nth-child(2),.dragImgContainer video:nth-child(2) {
+    z-index: 5;
+    transform: rotate(-15deg);
+  }
+
+  .dragImgContainer img:nth-child(3),.dragImgContainer video:nth-child(3) {
+    z-index: 1;
+    transform: rotate(15deg);
+  }
+
+  .shareDialog {
+      font-size: 13px;
+      color: rgb(114, 114, 114);
+      border-radius: 10px;
+  }
+
+  .shareDialog .el-dialog__title {
+      font-size: 15px;
+  }
+
+  .shareDialog .dialog-footer ,.shareDialog .el-dialog__body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+  }