code-image-backup-public/fastbee
1
0
Fork 0
mirror of https://gitee.com/beecue/fastbee.git synced 2025-12-17 16:36:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

界面响应式调整

Browse Source
This commit is contained in:
kerwincui
2022-05-31 22:51:59 +08:00
parent c226922f07
commit b78bf54e21
8 changed files with 124 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
vue/src/assets/icons/svg/validCode.svg
View File

@@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569580729849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1939" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M513.3 958.5c-142.2 0-397.9-222.1-401.6-440.5V268c1.7-39.6 31.7-72.3 71.1-77.3 49-4.6 97.1-16.5 142.7-35.3 47.8-14 91.9-38.3 129.4-71.1 30.3-24.4 72.9-26.3 105.3-4.6 39.9 30.7 83.8 55.9 130.5 74.6 48.6 14.7 98.2 25.9 148.4 33.7 38.5 7.6 67.1 40.3 69.5 79.5 3.3 84.9 2.5 169.9-2.6 254.7-33.7 281.6-253.7 436.4-392.7 436.3z m-0.1-813.7c-7.2-0.2-14.3 2-20 6.4-39.7 35.2-86.8 61.1-137.7 75.7-46.8 19.2-96.2 31-146.6 35.2-11 3.2-18.8 13-19.5 24.4v230.1c3.5 180.3 223.3 361 323.9 361s287.3-120.2 317.6-360.5c7.3-142.7 0-228.6 0-229.6-1.3-13.3-11-24.3-24-27.3-49.6-7.7-98.6-19-146.5-33.7-46.3-19.5-89.7-45.3-129-76.7-5.8-3.8-12.7-5.5-19.5-4.9l1.3-0.1z" fill="#C6CCDA" p-id="1940"></path><path d="M750.1 428L490.7 673.2c-11.7 11.1-29.5 12.9-43.1 4.2l-6.8-5.8-141.2-149.4c-9.3-9.3-12.7-22.9-9-35.5 3.8-12.6 14.1-22.1 27-24.8 12.9-2.7 26.1 1.9 34.6 11.9L469 597.5l233.7-221c14.6-12.8 36.8-11.6 49.9 2.7 13.2 14.2 11.5 35.3-2.5 48.8" fill="#C6CCDA" p-id="1941"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569580729849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1939" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M513.3 958.5c-142.2 0-397.9-222.1-401.6-440.5V268c1.7-39.6 31.7-72.3 71.1-77.3 49-4.6 97.1-16.5 142.7-35.3 47.8-14 91.9-38.3 129.4-71.1 30.3-24.4 72.9-26.3 105.3-4.6 39.9 30.7 83.8 55.9 130.5 74.6 48.6 14.7 98.2 25.9 148.4 33.7 38.5 7.6 67.1 40.3 69.5 79.5 3.3 84.9 2.5 169.9-2.6 254.7-33.7 281.6-253.7 436.4-392.7 436.3z m-0.1-813.7c-7.2-0.2-14.3 2-20 6.4-39.7 35.2-86.8 61.1-137.7 75.7-46.8 19.2-96.2 31-146.6 35.2-11 3.2-18.8 13-19.5 24.4v230.1c3.5 180.3 223.3 361 323.9 361s287.3-120.2 317.6-360.5c7.3-142.7 0-228.6 0-229.6-1.3-13.3-11-24.3-24-27.3-49.6-7.7-98.6-19-146.5-33.7-46.3-19.5-89.7-45.3-129-76.7-5.8-3.8-12.7-5.5-19.5-4.9l1.3-0.1z" fill="#fff" p-id="1940"></path><path d="M750.1 428L490.7 673.2c-11.7 11.1-29.5 12.9-43.1 4.2l-6.8-5.8-141.2-149.4c-9.3-9.3-12.7-22.9-9-35.5 3.8-12.6 14.1-22.1 27-24.8 12.9-2.7 26.1 1.9 34.6 11.9L469 597.5l233.7-221c14.6-12.8 36.8-11.6 49.9 2.7 13.2 14.2 11.5 35.3-2.5 48.8" fill="#fff" p-id="1941"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
vue/src/assets/images/computer.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

BIN
vue/src/assets/images/esp32.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 48 KiB

BIN
vue/src/assets/images/esp8266.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 48 KiB

BIN
vue/src/assets/images/raspberry.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB

BIN
vue/src/assets/images/telphone.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

84
vue/src/views/login.vue
View File

@@ -26,16 +26,16 @@
</el-button>
</div>
<div v-if="register">
<el-button style="padding:0px;">
<router-link :to='{path:"/register",query: this.$route.query }' style="color:#666;padding:12px 18px;display:flex;">注册账号
</router-link>
</el-button>
<el-button type="warning" style="padding:0px;">
<el-link href="https://wumei.live/" :underline="false" target="_blank" style="color:#fff;padding:12px 18px;">返回官网</el-link>
</el-button>
<el-button type="danger" style="padding:0px;">
<el-link href="https://wumei.live/doc" :underline="false" target="_blank" style="color:#fff;padding:12px 18px;">查看文档</el-link>
</el-button>
<el-button style="padding:0px;">
<router-link :to='{path:"/register",query: this.$route.query }' style="color:#666;padding:12px 18px;display:flex;">注册账号
</router-link>
</el-button>
</div>
</div>
</div>
@@ -44,23 +44,23 @@
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title" v-if="!bindAccount">账号登录</h3>
<h3 class="bindAccountTitle" v-else>绑定物美智能账户</h3>
<div style="font-size:16px;color:#eee;margin-bottom:10px;">演示账号：wumei<span style="margin:0 10px;">123456</span></div>
<div style="font-size:16px;color:#333;margin-bottom:10px;">演示账号：wumei<span style="margin:0 10px;">123456</span></div>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
<svg-icon slot="prefix" icon-class="user" class="input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
<svg-icon slot="prefix" icon-class="password" class="input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaOnOff">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
<svg-icon slot="prefix" icon-class="validCode" class="input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" />
<img :src="codeUrl" @click="getCode" />
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;color:#000;">记住密码</el-checkbox>
@@ -275,7 +275,7 @@ export default {
};
</script>
<style lang="scss" scoped>
<style lang="scss">
.login {
background: linear-gradient(303deg, #48c6ef 10%, #6f86d6 80%);
height: 100%;
@@ -303,33 +303,74 @@ export default {
text-align: center;
padding: 30px;
@media screen and (min-width:992px) {
h1 {
font-size: 46px;
font-size: 32px;
}
h2 {
font-size: 20px;
margin-top: -15px;
}
}
@media screen and (min-width:1200px) {
h1 {
font-size: 42px;
}
h2 {
font-size: 26px;
margin-top: -15px;
}
}
@media screen and (min-width:1920px) {
h1 {
font-size: 48px;
}
h2 {
font-size: 30px;
margin-top: -15px;
}
}
}
.login-form {
box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.1);
border-radius: 6px;
background-color: rgba(250, 250, 250, 0.2);
box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: rgba(250, 250, 250, 0.8);
border: 1px solid #fff;
padding: 25px 25px 5px 25px;
margin:0 auto;
margin: 0 auto;
z-index: 1000;
max-width: 400px;
max-width: 370px;
margin-bottom: 100px;
.el-input {
height: 38px;
input {
height: 38px;
background-color: rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.1);
color:#333;
}
// 谷歌
input::-webkit-input-placeholder{
color:#666;
}
// 火狐19+版本
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:#666;
}
// 火狐4-18版本
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:#666;
}
// IE10-11版本
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:#666;
}
}
@@ -337,6 +378,7 @@ export default {
height: 39px;
width: 14px;
margin-left: 2px;
color:#fff;
}
}
@@ -348,6 +390,8 @@ export default {
img {
cursor: pointer;
vertical-align: middle;
border-radius:5px;
height:38px;
}
}
@@ -364,7 +408,5 @@ export default {
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
}
</style>

69
vue/src/views/register.vue
View File

@@ -26,16 +26,16 @@
</el-button>
</div>
<div>
<el-button style="padding:0px;">
<router-link :to='{path:"/login",query: this.$route.query }' style="color:#666;padding:12px 18px;display:flex;">账号登录
</router-link>
</el-button>
<el-button type="warning" style="padding:0px;">
<el-link href="https://wumei.live/" :underline="false" target="_blank" style="color:#fff;padding:12px 18px;">返回官网</el-link>
</el-button>
<el-button type="danger" style="padding:0px;">
<el-link href="https://wumei.live/doc" :underline="false" target="_blank" style="color:#fff;padding:12px 18px;">查看文档</el-link>
</el-button>
<el-button style="padding:0px;">
<router-link :to='{path:"/login",query: this.$route.query }' style="color:#666;padding:12px 18px;display:flex;">账号登录
</router-link>
</el-button>
</div>
</div>
</div>
@@ -69,7 +69,7 @@
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="register-code">
<img :src="codeUrl" @click="getCode" class="register-code-img" />
<img :src="codeUrl" @click="getCode" />
</div>
</el-form-item>
<el-form-item style="width:100%;">
@@ -275,7 +275,7 @@ export default {
};
</script>
<style lang="scss" scoped>
<style lang="scss">
.register {
background: linear-gradient(303deg, #48c6ef 10%, #6f86d6 80%);
height: 100%;
@@ -294,35 +294,71 @@ export default {
color: #fff;
text-align: center;
padding: 30px;
@media screen and (min-width:992px) {
h1 {
font-size: 46px;
font-size: 32px;
}
h2 {
font-size: 20px;
margin-top: -15px;
}
}
@media screen and (min-width:1200px) {
h1 {
font-size: 42px;
}
h2 {
font-size: 26px;
margin-top: -15px;
}
}
@media screen and (min-width:1920px) {
h1 {
font-size: 48px;
}
h2 {
font-size: 30px;
margin-top: -15px;
}
}
}
.register-form {
box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.1);
border-radius: 6px;
border-radius: 10px;
background: #ffffff;
background-color: rgba(250, 250, 250, 0.2);
background-color: rgba(250, 250, 250, 0.8);
border: 1px solid #fff;
padding: 25px 25px 5px 25px;
margin:0 auto;
z-index: 1000;
max-width: 400px;
max-width: 370px;
margin-bottom: 100px;
.el-input {
height: 38px;
input {
height: 38px;
background-color: rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.1);
color:#333;
}
// 谷歌
input::-webkit-input-placeholder{
color:#666;
}
// 火狐19+版本
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:#666;
}
// 火狐4-18版本
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:#666;
}
// IE10-11版本
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:#666;
}
}
@@ -330,6 +366,7 @@ export default {
height: 39px;
width: 14px;
margin-left: 2px;
color:#fff;
}
}
@@ -341,6 +378,8 @@ export default {
img {
cursor: pointer;
vertical-align: middle;
border-radius:5px;
height: 38px;
}
}
@@ -356,8 +395,4 @@ export default {
font-size: 12px;
letter-spacing: 1px;
}
.register-code-img {
height: 38px;
}
</style>