| @@ -1,38 +1,36 @@ | |||||
| <template> | <template> | ||||
| <div id="app"> | <div id="app"> | ||||
| <top/> | |||||
| <transition name="app" mode="out-in"> | <transition name="app" mode="out-in"> | ||||
| <router-view></router-view> | <router-view></router-view> | ||||
| </transition> | </transition> | ||||
| <tail/> | |||||
| <tail /> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import top from "./components/common/top" | |||||
| import tail from "./components/common/tail" | |||||
| import top from "./components/common/top"; | |||||
| import tail from "./components/common/tail"; | |||||
| export default { | export default { | ||||
| components:{ | |||||
| components: { | |||||
| top, | top, | ||||
| tail | |||||
| tail, | |||||
| }, | }, | ||||
| data(){ | |||||
| return{} | |||||
| data() { | |||||
| return {}; | |||||
| }, | }, | ||||
| } | |||||
| }; | |||||
| </script> | </script> | ||||
| <style lang="scss"> | <style lang="scss"> | ||||
| body,p{ | |||||
| body, | |||||
| p { | |||||
| margin: 0 0; | margin: 0 0; | ||||
| padding: 0 0; | padding: 0 0; | ||||
| } | } | ||||
| input{ | |||||
| background:none; | |||||
| outline:none; | |||||
| border:none; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| input { | |||||
| background: none; | |||||
| outline: none; | |||||
| border: none; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| } | } | ||||
| </style> | </style> | ||||
| @@ -0,0 +1,2 @@ | |||||
| const baseUrl = ' https://smapitest.malls.iformall.com/C' | |||||
| export default baseUrl | |||||
| @@ -0,0 +1,71 @@ | |||||
| <template> | |||||
| <div class="page"> | |||||
| <div class="logoBox" @click="go('/')"> | |||||
| <img src="../../assets/img/LOGO1.png" class="logo" /> | |||||
| <div class="userInfo"> | |||||
| <div>用户名</div> | |||||
| <img class="userImg" src="../../assets/img/user center.png" /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import Vue from "vue"; | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| import { Toast } from "vant"; | |||||
| import baseUrl from "../../api/baseUrl"; | |||||
| Vue.use(Toast); | |||||
| export default { | |||||
| data() { | |||||
| return {}; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| go(url) { | |||||
| this.$router.push(url); | |||||
| }, | |||||
| }, | |||||
| created() {}, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .page { | |||||
| .logoBox { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| background-color: #606060; | |||||
| .logo { | |||||
| float: left; | |||||
| width: 140px; | |||||
| height: 40px; | |||||
| } | |||||
| .userInfo { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| color: #fff; | |||||
| .userImg { | |||||
| float: right; | |||||
| width: 30px; | |||||
| height: 30px; | |||||
| margin-top: 3px; | |||||
| margin-right: 10px; | |||||
| margin-left: 15px; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -1,5 +1,6 @@ | |||||
| <template> | <template> | ||||
| <div class="Box"> | <div class="Box"> | ||||
| <top /> | |||||
| <div class="topBox"> | <div class="topBox"> | ||||
| <div class="more" @click="showPopup"> | <div class="more" @click="showPopup"> | ||||
| <div class="wire"></div> | <div class="wire"></div> | ||||
| @@ -396,12 +397,17 @@ import "swiper/dist/js/swiper"; | |||||
| import "swiper/dist/css/swiper.css"; | import "swiper/dist/css/swiper.css"; | ||||
| import Swiper from "swiper"; | import Swiper from "swiper"; | ||||
| import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
| import top from "../common/top.vue"; | |||||
| import baseUrl from "../../api/baseUrl"; | |||||
| import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
| import Vue from "vue"; | import Vue from "vue"; | ||||
| Vue.use(Toast); | Vue.use(Toast); | ||||
| export default { | export default { | ||||
| components: { | |||||
| top, | |||||
| }, | |||||
| data() { | data() { | ||||
| return { | return { | ||||
| userName: "", | userName: "", | ||||
| @@ -601,8 +607,30 @@ export default { | |||||
| ...mapActions(["setCharacters"]), | ...mapActions(["setCharacters"]), | ||||
| goLogin() { | goLogin() { | ||||
| console.log(111); | |||||
| this.$router.push("/login"); | |||||
| const AccessToken = localStorage.getItem("AccessToken"); | |||||
| if (AccessToken) { | |||||
| this.$axios({ | |||||
| method: "get", | |||||
| url: `${baseUrl}/api/userVideo/list?pageNum=1&pageSize=3`, | |||||
| headers: { | |||||
| "Content-Type": "application/json;charset=UTF-8", | |||||
| token: AccessToken, | |||||
| }, | |||||
| }) | |||||
| .then((res) => { | |||||
| if (res.data.code == 1052) { | |||||
| this.$router.push("/login"); | |||||
| Toast.fail("登录过期,请重新登录!"); | |||||
| } else { | |||||
| this.$router.push("/myPage"); | |||||
| } | |||||
| }) | |||||
| .catch((err) => { | |||||
| Toast.fail(err.message); | |||||
| }); | |||||
| } else { | |||||
| this.$router.push("/login"); | |||||
| } | |||||
| }, | }, | ||||
| showPopup() { | showPopup() { | ||||
| @@ -0,0 +1,33 @@ | |||||
| <template> | |||||
| <div></div> | |||||
| </template> | |||||
| <script> | |||||
| import Vue from "vue"; | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| import { Toast } from "vant"; | |||||
| import baseUrl from "../../api/baseUrl"; | |||||
| Vue.use(Toast); | |||||
| export default { | |||||
| data() { | |||||
| return {}; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| go(url) { | |||||
| this.$router.push(url); | |||||
| }, | |||||
| }, | |||||
| created() {}, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped></style> | |||||
| @@ -28,12 +28,28 @@ const routes = [ | |||||
| // component: Home | // component: Home | ||||
| component: () => import("../components/styleAdd/styleAdd"), | component: () => import("../components/styleAdd/styleAdd"), | ||||
| }, | }, | ||||
| // 登录 | |||||
| { | { | ||||
| path: '/login', | path: '/login', | ||||
| name: 'login', | name: 'login', | ||||
| // component: Home | // component: Home | ||||
| component: () => import("../views/login/login"), | component: () => import("../views/login/login"), | ||||
| }, | }, | ||||
| // 创作中心首页 | |||||
| { | |||||
| path: '/myPage', | |||||
| name: 'myPage', | |||||
| // component: Home | |||||
| component: () => import("../views/myPage/myPage"), | |||||
| }, | |||||
| // 创作中心首页 | |||||
| { | |||||
| path: '/chooseModel', | |||||
| name: 'chooseModel', | |||||
| // component: Home | |||||
| component: () => import("../views/model/chooseModel"), | |||||
| }, | |||||
| ] | ] | ||||
| const router = new VueRouter({ | const router = new VueRouter({ | ||||
| @@ -1,7 +1,11 @@ | |||||
| <template> | <template> | ||||
| <div class="page"> | <div class="page"> | ||||
| <div class="logoBox" @click="go('/')"> | |||||
| <img src="../../assets/img/LOGO1.png" alt class="logo" /> | |||||
| <!-- <div class="logoTitle">metavatar</div> --> | |||||
| </div> | |||||
| <div class="loginBox"> | <div class="loginBox"> | ||||
| <div class="welcome">欢迎加入MetAvatar</div> | |||||
| <div class="welcome">欢迎加入metAvatar</div> | |||||
| <el-form ref="form" :rules="rules" :model="form"> | <el-form ref="form" :rules="rules" :model="form"> | ||||
| <el-form-item class="phone" prop="phone"> | <el-form-item class="phone" prop="phone"> | ||||
| <el-input | <el-input | ||||
| @@ -35,7 +39,7 @@ | |||||
| import Vue from "vue"; | import Vue from "vue"; | ||||
| import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
| import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
| import baseUrl from "../../api/baseUrl"; | |||||
| Vue.use(Toast); | Vue.use(Toast); | ||||
| export default { | export default { | ||||
| data() { | data() { | ||||
| @@ -79,6 +83,7 @@ export default { | |||||
| getCode() { | getCode() { | ||||
| const phoneValue = this.form.phone; | const phoneValue = this.form.phone; | ||||
| localStorage.setItem("phoneValue", phoneValue); | |||||
| let phoneReg = /^1[35789]\d{9}$/; | let phoneReg = /^1[35789]\d{9}$/; | ||||
| let phoneValide = phoneReg.test(phoneValue); | let phoneValide = phoneReg.test(phoneValue); | ||||
| @@ -87,28 +92,36 @@ export default { | |||||
| } else { | } else { | ||||
| this.$axios({ | this.$axios({ | ||||
| method: "get", | method: "get", | ||||
| url: `https://smapitest.malls.iformall.com/C/api/user/sendLoginPhoneCode?phone=${phoneValue}`, | |||||
| url: `${baseUrl}/api/user/sendLoginPhoneCode?phone=${phoneValue}`, | |||||
| headers: { | headers: { | ||||
| "Content-Type": "application/json;charset=UTF-8", | "Content-Type": "application/json;charset=UTF-8", | ||||
| }, | }, | ||||
| }) | }) | ||||
| .then((res) => { | .then((res) => { | ||||
| Toast.success("短信验证码发送成功!"); | |||||
| this.codeInfo = 60; | |||||
| const timer = setInterval(() => { | |||||
| if (this.codeInfo != 1) { | |||||
| this.codeInfo--; | |||||
| } else { | |||||
| clearInterval(timer); | |||||
| this.codeInfo = "获取验证码"; | |||||
| } | |||||
| }, 1000); | |||||
| console.log(res.data); | |||||
| if (res.data.code != 200) { | |||||
| Toast.fail(res.data.message); | |||||
| } else { | |||||
| Toast.success("短信验证码发送成功!"); | |||||
| this.codeInfo = 60; | |||||
| const timer = setInterval(() => { | |||||
| if (this.codeInfo != 1) { | |||||
| this.codeInfo--; | |||||
| } else { | |||||
| clearInterval(timer); | |||||
| this.codeInfo = "获取验证码"; | |||||
| } | |||||
| }, 1000); | |||||
| } | |||||
| }) | }) | ||||
| .catch((err) => { | .catch((err) => { | ||||
| Toast.fail(err.message); | Toast.fail(err.message); | ||||
| }); | }); | ||||
| } | } | ||||
| }, | }, | ||||
| go(url) { | |||||
| this.$router.push(url); | |||||
| }, | |||||
| login() { | login() { | ||||
| const data = { | const data = { | ||||
| phone: this.form.phone, | phone: this.form.phone, | ||||
| @@ -116,21 +129,21 @@ export default { | |||||
| }; | }; | ||||
| this.$axios({ | this.$axios({ | ||||
| method: "post", | method: "post", | ||||
| url: `https://smapitest.malls.iformall.com/C/api/user/doLoginByPhone`, | |||||
| url: `${baseUrl}/api/user/doLoginByPhone`, | |||||
| headers: { | headers: { | ||||
| "Content-Type": "application/json;charset=UTF-8", | "Content-Type": "application/json;charset=UTF-8", | ||||
| }, | }, | ||||
| data, | data, | ||||
| }) | }) | ||||
| .then((res) => { | .then((res) => { | ||||
| console.log(res, "res"); | |||||
| if (res.data.code == 200) { | |||||
| // console.log(res, "res"); | |||||
| if (res.data.code != 200) { | |||||
| Toast.fail(res.data.message); | |||||
| } else { | |||||
| Toast.success("登录成功!"); | Toast.success("登录成功!"); | ||||
| const token = res.data.data.token; | const token = res.data.data.token; | ||||
| localStorage.setItem("AccessToken", token); | localStorage.setItem("AccessToken", token); | ||||
| this.$router.push("/"); | |||||
| } else { | |||||
| Toast.fail(res.data.message); | |||||
| this.$router.push("/myPage"); | |||||
| } | } | ||||
| }) | }) | ||||
| .catch((err) => { | .catch((err) => { | ||||
| @@ -138,13 +151,31 @@ export default { | |||||
| }); | }); | ||||
| }, | }, | ||||
| }, | }, | ||||
| created() { | |||||
| const phoneValue = localStorage.getItem("phoneValue"); | |||||
| if (phoneValue) { | |||||
| this.form.phone = phoneValue; | |||||
| } | |||||
| }, | |||||
| }; | }; | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| background-color: #000000cd; | |||||
| padding-top: 36px; | |||||
| .logoBox { | |||||
| // margin-top: 10px; | |||||
| margin-left: 5px; | |||||
| margin-top: 10px; | |||||
| float: left; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| .logo { | |||||
| float: left; | |||||
| width: 140px; | |||||
| height: 40px; | |||||
| } | |||||
| } | |||||
| .loginBox { | .loginBox { | ||||
| height: 500px; | height: 500px; | ||||
| background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | ||||
| @@ -0,0 +1,183 @@ | |||||
| <template> | |||||
| <div> | |||||
| <HeadTop /> | |||||
| <div class="chooseModel"> | |||||
| <div :class="phase == 1 ? 'active' : ''">选择模板</div> | |||||
| <div :class="phase == 2 ? 'active' : ''">录入文案</div> | |||||
| <div :class="phase == 3 ? 'active' : ''">合成视频</div> | |||||
| </div> | |||||
| <div v-show="phase == 1" class="choose"> | |||||
| <div class="type"> | |||||
| <div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | |||||
| 全部模板 | |||||
| </div> | |||||
| <div :class="type == 1 ? 'active' : ''" @click="chooseType(1)"> | |||||
| 女性模板 | |||||
| </div> | |||||
| <div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | |||||
| 男性模板 | |||||
| </div> | |||||
| <div style="background-color: #46464661">自建模板</div> | |||||
| </div> | |||||
| <div class="modeList"> | |||||
| <div | |||||
| class="model" | |||||
| v-if="modeList.length >= 1" | |||||
| v-for="(item, index) in modeList" | |||||
| :key="index" | |||||
| @click="goDetail(item.id)" | |||||
| > | |||||
| <img :src="item.coverImg" alt="" /> | |||||
| <div class="modelName">{{ item.title }}</div> | |||||
| </div> | |||||
| <div class="alt" v-if="modeList.length == 0">暂无可用模板</div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import Vue from "vue"; | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| import HeadTop from "./../../components/common/head.vue"; | |||||
| import { Toast } from "vant"; | |||||
| import baseUrl from "../../api/baseUrl"; | |||||
| Vue.use(Toast); | |||||
| export default { | |||||
| components: { | |||||
| HeadTop, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| phase: 1, | |||||
| type: 0, | |||||
| modeList: [], | |||||
| }; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| go(url) { | |||||
| this.$router.push(url); | |||||
| }, | |||||
| chooseModel(num) { | |||||
| this.phase = num; | |||||
| }, | |||||
| chooseType(num) { | |||||
| this.type = num; | |||||
| this.getModeList(num); | |||||
| }, | |||||
| getModeList(sex) { | |||||
| const AccessToken = localStorage.getItem("AccessToken"); | |||||
| if (sex == 0) { | |||||
| sex = ""; | |||||
| } | |||||
| this.$axios({ | |||||
| method: "get", | |||||
| url: `${baseUrl}/api/mouldPatch/list?sex=${sex}&type=1&pageNum=1&pageSize=10`, | |||||
| headers: { | |||||
| "Content-Type": "application/json;charset=UTF-8", | |||||
| token: AccessToken, | |||||
| }, | |||||
| }) | |||||
| .then((res) => { | |||||
| if (res.data.code == 1052) { | |||||
| this.$router.push("/login"); | |||||
| Toast.fail("登录过期,请重新登录!"); | |||||
| } | |||||
| this.modeList = res.data.data.list; | |||||
| }) | |||||
| .catch((err) => { | |||||
| Toast.fail(err.message); | |||||
| }); | |||||
| }, | |||||
| goDetail(id) { | |||||
| console.log(id); | |||||
| }, | |||||
| }, | |||||
| created() { | |||||
| this.getModeList(0); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .chooseModel { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| width: 350px; | |||||
| height: 32px; | |||||
| margin: auto; | |||||
| margin-top: 15px; | |||||
| margin-bottom: 15px; | |||||
| div { | |||||
| width: 33.33%; | |||||
| height: 100%; | |||||
| line-height: 32px; | |||||
| text-align: center; | |||||
| border: 1px solid #46464661; | |||||
| &.active { | |||||
| background-color: #00ccff; | |||||
| color: #fff; | |||||
| } | |||||
| } | |||||
| } | |||||
| .choose { | |||||
| margin-bottom: 40px; | |||||
| .type { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| padding: 0 30px; | |||||
| margin-bottom: 20px; | |||||
| div { | |||||
| width: 65px; | |||||
| height: 25px; | |||||
| line-height: 25px; | |||||
| border: 1px solid #797979; | |||||
| border-radius: 5px; | |||||
| text-align: center; | |||||
| &.active { | |||||
| color: #fff; | |||||
| border: 1px solid #9d00ff5d; | |||||
| background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | |||||
| } | |||||
| } | |||||
| } | |||||
| .modeList { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| flex-wrap: wrap; | |||||
| margin: auto; | |||||
| padding: 0 25px; | |||||
| .model { | |||||
| text-align: center; | |||||
| margin-bottom: 25px; | |||||
| img { | |||||
| width: 150px; | |||||
| height: 220px; | |||||
| } | |||||
| .modelName { | |||||
| font-size: 15px; | |||||
| margin-top: 10px; | |||||
| } | |||||
| } | |||||
| .alt { | |||||
| font-size: 18px; | |||||
| margin: 80px auto; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,182 @@ | |||||
| <template> | |||||
| <div class="page"> | |||||
| <HeadTop /> | |||||
| <img class="showIMG" src="../../assets/img/testIMG.png" alt="" /> | |||||
| <div class="item"> | |||||
| <div class="title">我的视频作品</div> | |||||
| <div class="itemList"> | |||||
| <div class="videoModel"> | |||||
| <div class="videoPrv"> | |||||
| <img src="../../assets/img/imgPrv.png" /> | |||||
| </div> | |||||
| <div class="videoInfo"> | |||||
| <div class="videoName"> | |||||
| 视频名称视频名称视频名称视频名称视频名称视频名称 | |||||
| </div> | |||||
| <div class="createTime">创建时间:2022-10-18 12:13:14</div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="videoModel"> | |||||
| <div class="videoPrv"> | |||||
| <img src="../../assets/img/imgPrv.png" /> | |||||
| </div> | |||||
| <div class="videoInfo"> | |||||
| <div class="videoName"> | |||||
| 视频名称视频名称视频名称视频名称视频名称视频名称 | |||||
| </div> | |||||
| <div class="createTime">创建时间:2022-10-18 12:13:14</div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="videoModel"> | |||||
| <div class="videoPrv"> | |||||
| <img src="../../assets/img/imgPrv.png" /> | |||||
| </div> | |||||
| <div class="videoInfo"> | |||||
| <div class="videoName"> | |||||
| 视频名称视频名称视频名称视频名称视频名称视频名称 | |||||
| </div> | |||||
| <div class="createTime">创建时间:2022-10-18 12:13:14</div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="goAdd" @click="goCreateNew">+ 创作新作品</div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import Vue from "vue"; | |||||
| import HeadTop from "./../../components/common/head.vue"; | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| import { Toast } from "vant"; | |||||
| import baseUrl from "../../api/baseUrl"; | |||||
| Vue.use(Toast); | |||||
| export default { | |||||
| components: { | |||||
| HeadTop, | |||||
| }, | |||||
| data() { | |||||
| return {}; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| go(url) { | |||||
| this.$router.push(url); | |||||
| }, | |||||
| getVideoList() { | |||||
| const AccessToken = localStorage.getItem("AccessToken"); | |||||
| this.$axios({ | |||||
| method: "get", | |||||
| url: `${baseUrl}/api/userVideo/list?pageNum=1&pageSize=3`, | |||||
| headers: { | |||||
| "Content-Type": "application/json;charset=UTF-8", | |||||
| token: AccessToken, | |||||
| }, | |||||
| }) | |||||
| .then((res) => { | |||||
| console.log(res, "res"); | |||||
| if (res.data.code == 1052) { | |||||
| this.$router.push("/login"); | |||||
| Toast.fail("登录过期,请重新登录!"); | |||||
| } | |||||
| }) | |||||
| .catch((err) => { | |||||
| Toast.fail(err.message); | |||||
| }); | |||||
| }, | |||||
| goCreateNew() { | |||||
| this.$router.push("/chooseModel"); | |||||
| }, | |||||
| }, | |||||
| created() { | |||||
| this.getVideoList(); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .page { | |||||
| .logoBox { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| background-color: #606060; | |||||
| .logo { | |||||
| float: left; | |||||
| width: 140px; | |||||
| height: 40px; | |||||
| } | |||||
| .userInfo { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| color: #fff; | |||||
| .userImg { | |||||
| float: right; | |||||
| width: 30px; | |||||
| height: 30px; | |||||
| margin-top: 3px; | |||||
| margin-right: 10px; | |||||
| margin-left: 15px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .item { | |||||
| padding: 15px; | |||||
| .title { | |||||
| font-size: 20px; | |||||
| margin-bottom: 20px; | |||||
| } | |||||
| .itemList { | |||||
| .videoModel { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| margin-bottom: 20px; | |||||
| .videoPrv { | |||||
| width: 320px; | |||||
| } | |||||
| .videoInfo { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-between; | |||||
| margin-left: 10px; | |||||
| .videoName { | |||||
| font-size: 15px; | |||||
| } | |||||
| .createTime { | |||||
| font-size: 11px; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .goAdd { | |||||
| position: fixed; | |||||
| bottom: 50px; | |||||
| left: 50%; | |||||
| width: 300px; | |||||
| height: 30px; | |||||
| line-height: 30px; | |||||
| font-size: 15px; | |||||
| color: #fff; | |||||
| text-align: center; | |||||
| transform: translateX(-50%); | |||||
| background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | |||||
| border-radius: 8px; | |||||
| box-shadow: #60606082 1px 1px 1px 1px; | |||||
| } | |||||
| } | |||||
| </style> | |||||