Browse Source

样式修改

release
HolyKnightIX 2 years ago
parent
commit
deb0959f7a
13 changed files with 376 additions and 95 deletions
  1. +1
    -0
      package.json
  2. +5
    -4
      src/components/home/home.vue
  3. +12
    -0
      src/utils/scrollToID.js
  4. +15
    -2
      src/views/login/login.vue
  5. +6
    -1
      src/views/model/chooseModel.vue
  6. +5
    -0
      src/views/model/downloadVideo.vue
  7. +269
    -88
      src/views/model/generateVideo.vue
  8. +5
    -0
      src/views/model/getPaper.vue
  9. +5
    -0
      src/views/model/modelDetail.vue
  10. +5
    -0
      src/views/model/selectSound.vue
  11. +5
    -0
      src/views/myPage/myPage.vue
  12. +18
    -0
      vue.config.js
  13. +25
    -0
      yarn.lock

+ 1
- 0
package.json View File

@@ -25,6 +25,7 @@
"@vue/cli-service": "~4.5.13",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-template-compiler": "^2.6.11"
}
}

+ 5
- 4
src/components/home/home.vue View File

@@ -1,5 +1,6 @@
<template>
<div class="Box">
<div id="top"></div>
<top />
<div class="topBox">
<div class="more" @click="showPopup">
@@ -646,12 +647,11 @@ export default {
},
goView(id) {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
behavior: "smooth",
block: "start",
inline: "nearest",
});
this.show = false;
// console.log(document.querySelector(id),);
},
submit() {
let phone = /^1[35789]\d{9}$/;
@@ -707,6 +707,7 @@ export default {
},

mounted() {
this.goView("top");
new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,


+ 12
- 0
src/utils/scrollToID.js View File

@@ -0,0 +1,12 @@
/**
* @description:滚动到对应id的位置
* @param {type} id
*/
const scrollToID = id => {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
});
}
export default scrollToID

+ 15
- 2
src/views/login/login.vue View File

@@ -1,5 +1,6 @@
<template>
<div class="page">
<div id="top"></div>
<div class="logoBox" @click="go('/')">
<img src="../../assets/img/logoh.png" alt class="logo" />
<!-- <div class="logoTitle">metavatar</div> -->
@@ -26,7 +27,7 @@
<div class="inputCode">请输入短信验证码</div>
</el-form-item>
<el-form-item>
<button class="submitBtn" @click="login">登录/注册</button>
<el-button class="submitBtn" @click="login">登录/注册</el-button>
</el-form-item>
</el-form>
</div>
@@ -65,7 +66,9 @@
<span class="forgetPwd">忘记密码?</span>

<el-form-item>
<button class="submitBtn inside" @click="login">登录/注册</button>
<el-button class="submitBtn inside" @click="login"
>登录/注册</el-button
>
</el-form-item>
</el-form>
</div>
@@ -77,6 +80,8 @@ import Vue from "vue";
import { mapState, mapActions } from "vuex";
import { Toast } from "vant";
import baseUrl from "../../api/baseUrl";
import scrollToID from "../../utils/scrollToID";

Vue.use(Toast);
export default {
data() {
@@ -147,6 +152,10 @@ export default {
...mapActions(["setCharacters"]),

getCode() {
if (this.codeInfo != "获取验证码") {
Toast.fail("请求过于频繁,请稍后再试");
return;
}
const phoneValue = this.form.phone;
localStorage.setItem("phoneValue", phoneValue);
let phoneReg = /^1[35789]\d{9}$/;
@@ -192,6 +201,7 @@ export default {
phone: this.form.phone,
code: this.form.code,
};
console.log(data, "data");
this.$axios({
method: "post",
url: `${baseUrl}/api/user/doLoginByPhone`,
@@ -222,6 +232,9 @@ export default {
this.form.phone = phoneValue;
}
},
mounted() {
scrollToID("top");
},
};
</script>



+ 6
- 1
src/views/model/chooseModel.vue View File

@@ -1,5 +1,6 @@
<template>
<div @click="globalWatcher">
<div>
<div id="top"></div>
<HeadTop />
<!-- <div class="chooseModel">
<div :class="phase == 1 ? 'active' : ''">选择模板</div>
@@ -49,6 +50,7 @@ import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import { Toast } from "vant";
import baseUrl from "../../api/baseUrl";
import scrollToID from "../../utils/scrollToID";

Vue.use(Toast);
export default {
@@ -280,6 +282,9 @@ export default {
}
},
},
mounted() {
scrollToID("top");
},
created() {
this.getModeList(0);
},


+ 5
- 0
src/views/model/downloadVideo.vue View File

@@ -1,5 +1,6 @@
<template>
<div>
<div id="top"></div>
<HeadTop />
<div class="video">
<video
@@ -26,6 +27,7 @@ import { Toast } from "vant";
import baseUrl from "../../api/baseUrl";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import scrollToID from "../../utils/scrollToID";

Vue.use(Toast);
export default {
@@ -64,6 +66,9 @@ export default {
this.videoDetail = this.$route.query.videoDetail;
console.log(this.videoDetail);
},
mounted() {
scrollToID("top");
},
};
</script>



+ 269
- 88
src/views/model/generateVideo.vue View File

@@ -1,54 +1,50 @@
<template>
<div>
<div id="top"></div>
<HeadTop />
<div class="chooseModel">
<div class="active">选择模板</div>
<div class="active">录入文案</div>
<div class="active">合成视频</div>
</div>
<div class="title">生成视频</div>
<div class="coverImg">
<img :src="coverImg" />
</div>
<div class="sound">
<div class="select">更换声音</div>
<div class="soundList">
<div
class="item"
v-for="(item, index) in soundList"
:key="index"
@click="setIn('sound', item.id)"
:class="soundIndex == item.id ? 'active' : ''"
>
<div
class="preview"
:class="setIndex == item.id ? 'active' : ''"
:style="'background-color:' + item.color"
></div>
<div class="tag">{{ item.title }}</div>
</div>
</div>
<!-- <div>合成视频剩余时长:3:00</div> -->
</div>
<div class="backGround">
<div class="select">请选择视频背景</div>
<div class="select">更换背景</div>
<div class="backGroundList">
<div
@click="setIn(1)"
:class="setIndex == 1 ? 'active' : ''"
style="background-color: red"
></div>
<div
@click="setIn(2)"
:class="setIndex == 2 ? 'active' : ''"
style="background-color: orange"
></div>
<div
@click="setIn(3)"
:class="setIndex == 3 ? 'active' : ''"
style="background-color: yellow"
></div>
<div
@click="setIn(4)"
:class="setIndex == 4 ? 'active' : ''"
style="background-color: green"
></div>
<div
@click="setIn(5)"
:class="setIndex == 5 ? 'active' : ''"
style="background-color: aqua"
></div>
<div
@click="setIn(6)"
:class="setIndex == 6 ? 'active' : ''"
style="background-color: blue"
></div>
<div
@click="setIn(7)"
:class="setIndex == 7 ? 'active' : ''"
style="background-color: purple"
></div>
class="item"
v-for="(item, index) in backGroundList"
:key="index"
@click="setIn('backGround', item.id)"
:class="backGroundIndex == item.id ? 'active' : ''"
>
<div
class="preview"
:class="setIndex == item.id ? 'active' : ''"
:style="'background-color:' + item.color"
></div>
<div class="tag">{{ item.title }}</div>
</div>
</div>
<div>合成视频剩余时长:3:00</div>
<!-- <div>合成视频剩余时长:3:00</div> -->
</div>
<div class="bottomBtn">
<div class="back" @click="back">上一步</div>
@@ -69,6 +65,7 @@ import { Toast } from "vant";
import baseUrl from "../../api/baseUrl";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import scrollToID from "../../utils/scrollToID";

Vue.use(Toast);
export default {
@@ -79,10 +76,85 @@ export default {
return {
isShowCover: false,
show: false,
setIndex: 1,
soundIndex: "",
backGroundIndex: "",
coverImg: "",
id: "",
timerOver: false,
soundList: [
{
id: 1,
color: "red",
title: "红色",
},
{
id: 2,
color: "orange",
title: "橙色",
},
{
id: 3,
color: "yellow",
title: "黄色",
},
{
id: 4,
color: "green",
title: "绿色",
},
{
id: 5,
color: "aqua",
title: "青色",
},
{
id: 6,
color: "blue",
title: "蓝色",
},
{
id: 7,
color: "purple",
title: "紫色",
},
],
backGroundList: [
{
id: 1,
color: "red",
title: "红色",
},
{
id: 2,
color: "orange",
title: "橙色",
},
{
id: 3,
color: "yellow",
title: "黄色",
},
{
id: 4,
color: "green",
title: "绿色",
},
{
id: 5,
color: "aqua",
title: "青色",
},
{
id: 6,
color: "blue",
title: "蓝色",
},
{
id: 7,
color: "purple",
title: "紫色",
},
],
};
},
computed: {
@@ -98,8 +170,32 @@ export default {
this.$router.push(url);
},

setIn(num) {
this.setIndex = num;
setIn(type, num) {
// 更换声音
if (type == "sound") {
// 第一次选中
if (this.soundIndex == "") {
this.soundIndex = num;
// 取消选中
} else if (num == this.soundIndex) {
this.soundIndex = "";
// 有选中的情况下选择其他项
} else {
this.soundIndex = num;
}
// 更换背景
} else if (type == "backGround") {
// 第一次选中
if (this.backGroundIndex == "") {
this.backGroundIndex = num;
// 取消选中
} else if (num == this.backGroundIndex) {
this.backGroundIndex = "";
// 有选中的情况下选择其他项
} else {
this.backGroundIndex = num;
}
}
},

back() {
@@ -200,62 +296,146 @@ export default {
this.coverImg = this.$route.query.coverImg;
this.id = this.$route.query.id;
},
mounted() {
scrollToID("top");
},
};
</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: 90%;
line-height: 32px;
text-align: center;
border: 1px solid #46464661;
&.active {
background-color: #00ccff;
color: #fff;
}
}
.title {
text-align: center;
width: 70px;
font-size: 16px;
font-weight: 600;
border-bottom: 3px solid #0068b7;
padding-bottom: 7px;
margin: 10px auto;
margin-bottom: 25px;
}
.coverImg {
text-align: center;
margin: 25px auto;

img {
width: 270px;
height: 380px;
border: 1px solid #00000046;
border-radius: 5px;
width: 207px;
height: 368.5px;
}
}
.sound {
position: relative;
width: 80%;
border: 1px solid #0068b7;
padding: 12.5px;
padding-bottom: 8px;
border-radius: 5px;
margin: 15px auto;
.select {
position: absolute;
top: -7px;
left: 10px;
font-size: 10px;
color: #0068b7;
background-color: #fff;
padding: 0 5px;
}
.soundList {
display: flex;
overflow-x: auto;
.item {
display: flex;
justify-content: space-around;
align-items: center;
margin-right: 8px;
transition: all 0.5s;
padding: 5px;
.preview {
width: 35px;
height: 35px;
margin-right: 10px;
flex-shrink: 0;
border: 1px solid #00000036;
border-radius: 50% 50%;
transition: all 0.5s;
opacity: 0.9;

&.active {
border: 1px solid #000;
width: 35px;
height: 35px;
opacity: 1;
}
}
.tag {
min-width: 40px;
}
&.active {
border-radius: 5px;
background-color: #00000025;
}
}

// 隐藏滚动条
&::-webkit-scrollbar {
width: 0 !important;
}
}
}
.backGround {
padding-left: 10px;
position: relative;
width: 80%;
border: 1px solid #0068b7;
padding: 12.5px;
padding-bottom: 8px;
border-radius: 5px;
margin: auto;
.select {
font-size: 14px;
margin-bottom: 10px;
position: absolute;
top: -7px;
left: 10px;
font-size: 10px;
color: #0068b7;
background-color: #fff;
padding: 0 5px;
}
.backGroundList {
display: flex;
overflow-x: auto;
.item {
display: flex;
justify-content: space-around;
align-items: center;
margin-right: 8px;
transition: all 0.5s;
padding: 5px;
.preview {
width: 35px;
height: 35px;
margin-right: 10px;
flex-shrink: 0;
border: 1px solid #00000036;
border-radius: 50% 50%;
transition: all 0.5s;
opacity: 0.9;

div {
width: 120px;
height: 120px;
margin-right: 10px;
flex-shrink: 0;
&.active {
border: 1px solid #000;
width: 35px;
height: 35px;
opacity: 1;
}
}
.tag {
min-width: 40px;
}
&.active {
border: 2px solid #000;
width: 118px;
height: 118px;
transition: all 0.5s;
border-radius: 5px;
background-color: #00000025;
}
}

// 隐藏滚动条
&::-webkit-scrollbar {
width: 0 !important;
@@ -265,21 +445,22 @@ export default {
.bottomBtn {
display: flex;
justify-content: space-between;
padding: 0 75px;
margin-top: 20px;
margin-bottom: 20px;
padding: 0 32.5px;
margin-top: 16px;
margin-bottom: 30px;
div {
width: 100px;
height: 30px;
color: #484848;
line-height: 30px;
width: 142px;
height: 42px;
color: #fff;
line-height: 42px;
text-align: center;
border: 1px solid #484848;
border: 1px solid #d2d2d2;
border-radius: 7px;
background-color: #d2d2d2;
&.next {
color: #fff;
border: 1px solid #00ccff;
background-color: #00ccff;
border: 1px solid #0068b7;
background-color: #0068b7;
}
}
}


+ 5
- 0
src/views/model/getPaper.vue View File

@@ -1,5 +1,6 @@
<template>
<div>
<div id="top"></div>
<HeadTop />
<div class="title">录入文案</div>
<div class="content">
@@ -30,6 +31,7 @@ import { Toast } from "vant";
import baseUrl from "../../api/baseUrl";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import scrollToID from "../../utils/scrollToID";

Vue.use(Toast);
export default {
@@ -150,6 +152,9 @@ export default {
console.log(this.modelDetail);
}
},
mounted() {
scrollToID("top");
},
};
</script>



+ 5
- 0
src/views/model/modelDetail.vue View File

@@ -1,5 +1,6 @@
<template>
<div>
<div id="top"></div>
<HeadTop />
<div class="chooseModel">
<div :class="phase == 1 ? 'active' : ''">选择模板</div>
@@ -35,6 +36,7 @@ import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import { Toast } from "vant";
import baseUrl from "../../api/baseUrl";
import scrollToID from "../../utils/scrollToID";

Vue.use(Toast);
export default {
@@ -139,6 +141,9 @@ export default {
const id = this.$route.query.id;
this.getModeDetail(id);
},
mounted() {
scrollToID("top");
},
};
</script>



+ 5
- 0
src/views/model/selectSound.vue View File

@@ -1,5 +1,6 @@
<template>
<div>
<div id="top"></div>
<HeadTop />
<div class="title">请选择需要更换的语音</div>
<div class="selectSex">
@@ -33,6 +34,7 @@ import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import { Toast } from "vant";
import baseUrl from "../../api/baseUrl";
import scrollToID from "../../utils/scrollToID";

Vue.use(Toast);
export default {
@@ -90,6 +92,9 @@ export default {
});
},
},
mounted() {
scrollToID("top");
},
created() {
this.getModeList(2);
},


+ 5
- 0
src/views/myPage/myPage.vue View File

@@ -1,5 +1,6 @@
<template>
<div class="page">
<div id="top"></div>
<HeadTop />
<img class="showIMG" src="../../assets/img/BG-Page.png" alt="" />
<div class="item">
@@ -54,6 +55,7 @@ import { mapState, mapActions } from "vuex";
import { Toast } from "vant";
import baseUrl from "../../api/baseUrl";
import timestampToTime from "../../utils/timestampToTime";
import scrollToID from "../../utils/scrollToID";

Vue.use(Toast);
export default {
@@ -140,6 +142,9 @@ export default {
this.$router.push("/chooseModel");
},
},
mounted() {
scrollToID("top");
},
created() {
this.getVideoList(1);
},


+ 18
- 0
vue.config.js View File

@@ -1,3 +1,5 @@
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
css: {
loaderOptions: {
@@ -44,4 +46,20 @@ module.exports = {
},
lintOnSave: false,
publicPath: './', // 打包后引用的资源路径

configureWebpack: {
plugins: [
//打包环境去掉console.log
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true, //注释console
drop_debugger: true, //注释debugger
pure_funcs: ['console.log'], //移除console.log
},
},
}),
],
}

}

+ 25
- 0
yarn.lock View File

@@ -6393,6 +6393,11 @@ send@0.18.0:
range-parser "~1.2.1"
statuses "2.0.1"

serialize-javascript@^1.7.0:
version "1.9.1"
resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==

serialize-javascript@^4.0.0:
version "4.0.0"
resolved "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
@@ -7240,6 +7245,26 @@ uglify-js@3.4.x:
commander "~2.19.0"
source-map "~0.6.1"

uglify-js@^3.6.0:
version "3.17.4"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.17.4.tgz#61678cf5fa3f5b7eb789bb345df29afb8257c22c"
integrity sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==

uglifyjs-webpack-plugin@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-2.2.0.tgz#e75bc80e7f1937f725954c9b4c5a1e967ea9d0d7"
integrity sha512-mHSkufBmBuJ+KHQhv5H0MXijtsoA1lynJt1lXOaotja8/I0pR4L9oGaPIZw+bQBOFittXZg9OC1sXSGO9D9ZYg==
dependencies:
cacache "^12.0.2"
find-cache-dir "^2.1.0"
is-wsl "^1.1.0"
schema-utils "^1.0.0"
serialize-javascript "^1.7.0"
source-map "^0.6.1"
uglify-js "^3.6.0"
webpack-sources "^1.4.0"
worker-farm "^1.7.0"

unbox-primitive@^1.0.2:
version "1.0.2"
resolved "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"


Loading…
Cancel
Save