MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

将sass换为less，受不了

Browse Source
This commit is contained in:
zyronon 2021-08-21 00:32:02 +08:00
parent 3909dc2bda
commit b6571b96d5
95 changed files with 1322 additions and 947 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -28,9 +28,9 @@
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0", "eslint-plugin-vue": "^7.0.0",
"mobile-select": "^1.1.2", "less": "^4.1.1",
"node-sass": "^4.9.3", "less-loader": "^7.0.0",
"sass-loader": "^7.1.0" "mobile-select": "^1.1.2"
}, },
"eslintConfig": { "eslintConfig": {
"root": false, "root": false,

3
src/App.vue
View File

@ -87,7 +87,7 @@ export default {
}, },
} }
</script> </script>
<style lang="scss"> <style lang="less">
.base-slide-item { .base-slide-item {
min-width: 100vw; min-width: 100vw;
@ -136,5 +136,4 @@ export default {
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }
</style> </style>

0
src/assets/scss/anim.scss → src/assets/scss/anim.less
View File

14
src/assets/scss/color.less Normal file
View File

@ -0,0 +1,14 @@
@main-bg: rgb(22, 26, 37);
@active-main-bg: rgb(31, 37, 52);
@second-text-color: rgb(143, 143, 158);
@second-btn-color: rgb(58, 58, 70);
@second-btn-color-tran: rgba(58, 58, 70, .4);
@line-color: rgb(37, 45, 66);
@primary-btn-color: rgb(252, 47, 86);
@disable-primary-btn-color: rgba(252, 47, 86, .5);
.second-text-color {
color: @second-text-color;
}

14
src/assets/scss/color.scss
View File

@ -1,14 +0,0 @@
$main-bg: rgb(22, 26, 37);
$active-main-bg: rgb(31, 37, 52);
$second-text-color: rgb(143, 143, 158);
$second-btn-color: rgb(58, 58, 70);
$second-btn-color-tran: rgba(58, 58, 70, .4);
$line-color: rgb(37, 45, 66);
$primary-btn-color: rgb(252, 47, 86);
$disable-primary-btn-color: rgba(252, 47, 86, .5);
.second-text-color {
color: $second-text-color;
}

22
src/assets/scss/custom.scss → src/assets/scss/custom.less
View File

@ -26,7 +26,7 @@
&.no-active { &.no-active {
&:active { &:active {
background: $main-bg; background: @main-bg;
} }
} }
@ -35,11 +35,11 @@
} }
&.border { &.border {
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
} }
&:active { &:active {
background: $active-main-bg; background: @active-main-bg;
} }
.left { .left {
@ -58,7 +58,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: $second-text-color; color: @second-text-color;
img { img {
margin-left: .5rem; margin-left: .5rem;
@ -77,21 +77,21 @@
font-size: 1.4rem; font-size: 1.4rem;
&.primary { &.primary {
background: $primary-btn-color; background: @primary-btn-color;
&:active { &:active {
background: $disable-primary-btn-color; background: @disable-primary-btn-color;
} }
} }
&.no-active { &.no-active {
&:active { &:active {
&.primary { &.primary {
background: $primary-btn-color; background: @primary-btn-color;
} }
&.dark { &.dark {
background: $second-btn-color; background: @second-btn-color;
} }
&.white { &.white {
@ -113,10 +113,10 @@
} }
&.dark { &.dark {
background: $second-btn-color; background: @second-btn-color;
&:active { &:active {
background: $second-btn-color-tran; background: @second-btn-color-tran;
} }
} }
@ -134,7 +134,7 @@ p {
.line { .line {
height: 1px; height: 1px;
background: $line-color; background: @line-color;
width: 100%; width: 100%;
} }

2
src/assets/scss/index.scss → src/assets/scss/index.less
View File

@ -15,7 +15,7 @@ html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
//background: #2e3244; //background: #2e3244;
background: $main-bg; background: @main-bg;
font-size: 62.5%; font-size: 62.5%;
//letter-spacing: .11rem; //letter-spacing: .11rem;
margin: 0; margin: 0;

0
src/assets/scss/layout.scss → src/assets/scss/layout.less
View File

140
src/assets/scss/utils.less Normal file
View File

@ -0,0 +1,140 @@
@use "sass:math";
///*
//
//width
//
//*/
//$width: 500;
//@while $width >= 0 {
// .w#{$width}p {
// width: #{$width}px !important;
// }
// $width: $width - 10;
//}
//
//
//$width: 100;
//@while $width >= 0 {
// .w#{$width} {
// //width: math.percentage($width / 100) !important;
// }
// $width: $width - 1;
//}
//
///*
//
//$height
//
//*/
//$height: 500;
//@while $height >= 0 {
// .h#{$height}p {
// height: #{$height}px !important;
// }
// $height: $height - 10;
//}
//
//
//$height: 100;
//@while $height >= 0 {
// .h#{$height} {
// //height: math.percentage($height / 100) !important;
// }
// $height: $height - 1;
//}
//
/*
margin
*/
.ml(5);
.ml(@n, @i: 1) when (@i =< @n) {
.ml@{i}r {
margin-left: (1rem * @i) !important;
}
.ml(@n, (@i + 1));
}
.mr(5);
.mr(@n, @i: 1) when (@i =< @n) {
.mr@{i}r {
margin-left: (1rem * @i) !important;
}
.mr(@n, (@i + 1));
}
.mt(5);
.mt(@n, @i: 1) when (@i =< @n) {
.mt@{i}r {
margin-left: (1rem * @i) !important;
}
.mt(@n, (@i + 1));
}
.mb(5);
.mb(@n, @i: 1) when (@i =< @n) {
.mb@{i}r {
margin-left: (1rem * @i) !important;
}
.mb(@n, (@i + 1));
}
/*
padding
*/
.pb(5);
.pb(@n, @i: 1) when (@i =< @n) {
.pb@{i}r {
margin-left: (1rem * @i) !important;
}
.pb(@n, (@i + 1));
}
.pt(5);
.pt(@n, @i: 1) when (@i =< @n) {
.pt@{i}r {
margin-left: (1rem * @i) !important;
}
.pt(@n, (@i + 1));
}
.pl(5);
.pl(@n, @i: 1) when (@i =< @n) {
.pl@{i}r {
margin-left: (1rem * @i) !important;
}
.pl(@n, (@i + 1));
}
.pr(5);
.pr(@n, @i: 1) when (@i =< @n) {
.pr@{i}r {
margin-left: (1rem * @i) !important;
}
.pr(@n, (@i + 1));
}
/*
font
*/
.f(40);
.f(@n, @i: 10) when (@i =< @n) {
.f@{i} {
margin-left: (1px * @i) !important;
}
.f(@n, (@i + 1));
}

157
src/assets/scss/utils.scss
View File

@ -1,157 +0,0 @@
@use "sass:math";
///*
//
//width
//
//*/
//$width: 500;
//@while $width >= 0 {
// .w#{$width}p {
// width: #{$width}px !important;
// }
// $width: $width - 10;
//}
//
//
//$width: 100;
//@while $width >= 0 {
// .w#{$width} {
// //width: math.percentage($width / 100) !important;
// }
// $width: $width - 1;
//}
//
///*
//
//$height
//
//*/
//$height: 500;
//@while $height >= 0 {
// .h#{$height}p {
// height: #{$height}px !important;
// }
// $height: $height - 10;
//}
//
//
//$height: 100;
//@while $height >= 0 {
// .h#{$height} {
// //height: math.percentage($height / 100) !important;
// }
// $height: $height - 1;
//}
//
/*
margin
*/
$margin: 5;
@while $margin >= 0 {
.ml#{$margin}r {
margin-left: #{$margin}rem !important;
}
$margin: $margin - 1;
}
$margin: 5;
@while $margin >= 0 {
.mr#{$margin}r {
margin-right: #{$margin}rem !important;
}
$margin: $margin - 1;
}
$margin: 5;
@while $margin >=0 {
.mt#{$margin}r {
margin-top: #{$margin}rem !important;
}
$margin: $margin - 1;
}
$margin: 5;
@while $margin >= 0 {
.mb#{$margin}r {
margin-bottom: #{$margin}rem !important;
}
$margin: $margin - 1;
}
$margin: 5;
@while $margin >= 0 {
.m#{$margin}r {
margin: #{$margin}rem !important;
}
$margin: $margin - 1;
}
/*
padding
*/
$padding: 5;
@while $padding >= 0 {
.pl#{$padding}r {
padding-left: #{$padding}rem !important;
}
$padding: $padding - 1;
}
$padding: 5;
@while $padding >= 0 {
.pr#{$padding}r {
padding-right: #{$padding}rem !important;
}
$padding: $padding - 1;
}
$padding: 5;
@while $padding >= 0 {
.pt#{$padding}r {
padding-top: #{$padding}rem !important;
}
$padding: $padding - 1;
}
$padding: 5;
@while $padding >= 0 {
.pb#{$padding}r {
padding-bottom: #{$padding}rem !important;
}
$padding: $padding - 1;
}
$padding: 5;
@while $padding >= 0 {
.p#{$padding}r {
padding: #{$padding}rem !important;
}
$padding: $padding - 1;
}
/*
font
*/
$font: 40;
@while $font >=10 {
.f#{$font} {
font-size: #{$font}px !important;
}
$font: $font - 1;
}

2
src/assets/scss/variables.less Normal file
View File

@ -0,0 +1,2 @@
@footer-height: 6rem;
@header-height: 6rem;

2
src/assets/scss/variables.scss
View File

@ -1,2 +0,0 @@
$footer-height: 6rem;
$header-height: 6rem;

2
src/components/Back.vue
View File

@ -37,7 +37,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
img { img {
width: 2rem; width: 2rem;
} }

14
src/components/BaseButton.vue
View File

@ -55,7 +55,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../assets/scss/index"; @import "../assets/scss/index";
.button { .button {
@ -85,21 +85,21 @@ export default {
} }
&.primary { &.primary {
background: $primary-btn-color; background: @primary-btn-color;
&:active { &:active {
background: $disable-primary-btn-color; background: @disable-primary-btn-color;
} }
} }
&.no-active { &.no-active {
&:active { &:active {
&.primary { &.primary {
background: $primary-btn-color; background: @primary-btn-color;
} }
&.dark { &.dark {
background: $second-btn-color; background: @second-btn-color;
} }
&.white { &.white {
@ -122,10 +122,10 @@ export default {
} }
&.dark { &.dark {
background: $second-btn-color; background: @second-btn-color;
&:active { &:active {
background: $second-btn-color-tran; background: @second-btn-color-tran;
} }
} }

4
src/components/BaseHeader.vue
View File

@ -53,7 +53,7 @@ export default {
} }
</script> </script>
<style scoped lang='scss'> <style scoped lang="less">
@import "../assets/scss/index"; @import "../assets/scss/index";
#BaseHeader { #BaseHeader {
@ -67,7 +67,7 @@ export default {
} }
&.dark { &.dark {
background: $main-bg; background: @main-bg;
color: white; color: white;
} }

2
src/components/Check.vue
View File

@ -28,7 +28,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../assets/scss/index"; @import "../assets/scss/index";
.Check { .Check {

2
src/components/Comment.vue
View File

@ -61,7 +61,7 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.comment { .comment {
position: fixed; position: fixed;

10
src/components/Footer.vue
View File

@ -66,7 +66,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
.footer { .footer {
font-size: 1.5rem; font-size: 1.5rem;
@ -105,10 +105,10 @@ export default {
} }
.add-ctn { .add-ctn {
$height: 2.7rem; @height: 2.7rem;
$width: 4rem; @width: 4rem;
height: $height; height: @height;
width: $width; width: @width;
background: linear-gradient(to right, #59dcdf, #ff5f75); background: linear-gradient(to right, #59dcdf, #ff5f75);
border-radius: .5rem; border-radius: .5rem;
box-sizing: border-box; box-sizing: border-box;

4
src/components/Indicator.vue
View File

@ -95,7 +95,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../assets/scss/index"; @import "../assets/scss/index";
.indicator-ctn { .indicator-ctn {
@ -106,7 +106,7 @@ export default {
left: 0; left: 0;
right: 0; right: 0;
z-index: 1; z-index: 1;
background: $main-bg; background: @main-bg;
.tabs { .tabs {
display: flex; display: flex;

4
src/components/Loading.vue
View File

@ -16,7 +16,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../assets/scss/index"; @import "../assets/scss/index";
.Loading { .Loading {
@ -52,7 +52,7 @@ export default {
} }
.red { .red {
background: $primary-btn-color; background: @primary-btn-color;
animation: anim-red .4s ease-in-out 0s infinite alternate; animation: anim-red .4s ease-in-out 0s infinite alternate;
} }

2
src/components/Mask.vue
View File

@ -15,7 +15,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
.Mask { .Mask {
z-index: 3; z-index: 3;

4
src/components/NoMore.vue
View File

@ -15,7 +15,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../assets/scss/index"; @import "../assets/scss/index";
.NoMore { .NoMore {
@ -24,6 +24,6 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: $second-text-color; color: @second-text-color;
} }
</style> </style>

2
src/components/Other.vue
View File

@ -121,7 +121,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
.me { .me {
color: white; color: white;

2
src/components/Posters.vue
View File

@ -69,7 +69,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
.posters { .posters {
display: grid; display: grid;
grid-template-columns: 33.33vw 33.33vw 33.33vw; grid-template-columns: 33.33vw 33.33vw 33.33vw;

4
src/components/Search.vue
View File

@ -60,7 +60,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../assets/scss/color"; @import "../assets/scss/color";
.search-ctn { .search-ctn {
@ -100,7 +100,7 @@ export default {
background: transparent; background: transparent;
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: $second-text-color; color: @second-text-color;
} }
} }

2
src/components/Share.vue
View File

@ -99,7 +99,7 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.share { .share {
position: fixed; position: fixed;
/*top: 200px;*/ /*top: 200px;*/

4
src/components/Video.vue
View File

@ -298,7 +298,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../assets/scss/color"; @import "../assets/scss/color";
.fade-enter-active, .fade-enter-active,
@ -573,7 +573,7 @@ export default {
.right { .right {
margin: 0 10px; margin: 0 10px;
color: $second-text-color; color: @second-text-color;
.name { .name {
margin-right: 10px; margin-right: 10px;

2
src/components/common/Music.vue
View File

@ -68,7 +68,7 @@
} }
</script> </script>
<style scoped lang='scss'> <style scoped lang="less">
.Music { .Music {
header { header {
background: #454b66; background: #454b66;

6
src/components/dialog/ConfirmDialog.vue
View File

@ -67,7 +67,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.ConfirmDialog { .ConfirmDialog {
@ -105,7 +105,7 @@ export default {
font-size: 1.3rem; font-size: 1.3rem;
&.gray { &.gray {
color: $second-text-color; color: @second-text-color;
} }
} }
} }
@ -131,7 +131,7 @@ export default {
border-right: 1px solid whitesmoke; border-right: 1px solid whitesmoke;
&.gray { &.gray {
color: $second-text-color; color: @second-text-color;
} }
} }

2
src/components/dialog/FadeDialog.vue
View File

@ -16,7 +16,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.FadeDialog { .FadeDialog {

8
src/components/dialog/FromBottomDialog.vue
View File

@ -156,7 +156,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.FromBottomDialog { .FromBottomDialog {
@ -171,7 +171,7 @@ export default {
border-radius: .5rem .5rem 0 0; border-radius: .5rem .5rem 0 0;
&.dark { &.dark {
background: $main-bg; background: @main-bg;
} }
&.light { &.light {
@ -198,10 +198,10 @@ export default {
align-items: center; align-items: center;
&.dark { &.dark {
background: $main-bg; background: @main-bg;
.content { .content {
background: $second-btn-color; background: @second-btn-color;
} }
} }

4
src/components/dialog/NoticeDialog.vue
View File

@ -53,7 +53,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.NoticeDialog { .NoticeDialog {
@ -91,7 +91,7 @@ export default {
font-size: 1.3rem; font-size: 1.3rem;
&.gray{ &.gray{
color: $second-text-color; color: @second-text-color;
} }
} }
} }

2
src/components/dialog/SelectDialog.vue
View File

@ -26,7 +26,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
.SelectDialog { .SelectDialog {
z-index: 10; z-index: 10;
position: absolute; position: absolute;

2
src/components/dialog/SimpleConfirmDialog.vue
View File

@ -33,7 +33,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
.SimpleConfirmDialog { .SimpleConfirmDialog {
z-index: 10; z-index: 10;

4
src/components/home/home3.vue
View File

@ -397,7 +397,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
#home-index { #home-index {
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -553,7 +553,7 @@ export default {
} }
} }
</style> </style>
<style scoped lang="scss"> <style scoped lang="less">
.pause-enter-active { .pause-enter-active {
transition: all .3s ease; transition: all .3s ease;

2
src/components/slide/SlideColumnList.vue
View File

@ -271,7 +271,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
#base-slide-wrapper { #base-slide-wrapper {

2
src/components/slide/SlideItem.vue
View File

@ -10,7 +10,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
.base-slide-item { .base-slide-item {
min-width: 100vw; min-width: 100vw;
//min-height: 100vh; //min-height: 100vh;

4
src/components/slide/SlideList.vue
View File

@ -413,7 +413,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
#base-slide-wrapper { #base-slide-wrapper {
@ -506,7 +506,7 @@ export default {
left: 0; left: 0;
right: 0; right: 0;
z-index: 999; z-index: 999;
background: $main-bg; background: @main-bg;
.tabs { .tabs {
display: flex; display: flex;

2
src/components/slide/SlideRowList.vue
View File

@ -321,7 +321,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
#base-slide-wrapper { #base-slide-wrapper {

2
src/main.js
View File

@ -1,7 +1,7 @@
import * as Vue from 'vue' import * as Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import mitt from 'mitt' import mitt from 'mitt'
import './assets/scss/index.scss' import './assets/scss/index.less'
// import './mock'// 导入 mock 数据处理 // import './mock'// 导入 mock 数据处理
import api from './api' import api from './api'
import router from "./router"; import router from "./router";

369
src/pages/home/Attention.vue
View File

@ -4,173 +4,175 @@
<span @click="$nav('/country-choose')">双流</span> <span @click="$nav('/country-choose')">双流</span>
<div class="arrow"></div> <div class="arrow"></div>
</header> </header>
<div class="scroll-wrapper" <div class="scroller"
ref="scroll-wrapper" ref="scroller"
@touchstart="start" @touchstart="start"
@touchmove="move" @touchmove="move"
@touchend="end" @touchend="end"
@scroll="scroll"
> >
<div class="header" ref="header"> <div ref="wrapper" class="wrapper">
<Loading :isFullScreen="false"></Loading> <div class="header" ref="header">
</div> <Loading :isFullScreen="false"></Loading>
<div class="ad" v-if="false"> </div>
<div class="title">超值卖场 次日达</div> <div class="ad" v-if="false">
<div class="good-ctn"> <div class="title">超值卖场 次日达</div>
<div class="good-ctn">
<div class="left">
<div class="left-title">
<span>限量秒杀</span>
<div>低至0.99元</div>
</div>
<div class="goods">
<div class="good">
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
<div class="name">每日坚果5包</div>
<div class="price">￥0.99</div>
</div>
<div class="good">
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
<div class="name">每日坚果5包</div>
<div class="price">￥0.99</div>
</div>
</div>
</div>
<div class="right">
<div class="goods">
<div class="good">
<div class="notice">
<div class="ad-name">低价疯抢</div>
<div class="ad-desc">统一方便面</div>
</div>
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
</div>
<div class="good">
<div class="notice">
<div class="ad-name">低价疯抢</div>
<div class="ad-desc">统一方便面</div>
</div>
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
</div>
</div>
</div>
</div>
</div>
<div ref="content" class="content">
<div class="left"> <div class="left">
<div class="left-title"> <div class="item" v-for="item in left">
<span>限量秒杀</span> <template v-if="item.type === 0">
<div>低至0.99元</div> <div class="wrapper">
</div> <img class="poster" :src="item.src"/>
<div class="goods"> <img :src="item.author" alt="" class="author">
<div class="good"> </div>
<img class="good-img" src="../../assets/img/poster/1.jpg"/> <div class="location" v-if="item.address">
<div class="name">每日坚果5包</div> <div class="top">
<div class="price">￥0.99</div> <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
</div> <div class="name">{{ item.address.name }}</div>
<div class="good"> </div>
<img class="good-img" src="../../assets/img/poster/1.jpg"/> <div class="bottom">
<div class="name">每日坚果5包</div> <div class="type">{{ item.address.type }}</div>
<div class="price">￥0.99</div> <div class="line"></div>
</div> <div class="other">{{ item.address.number }}人想去</div>
</div>
</div>
</template>
<template v-if="item.type === 1">
<div class="wrapper" style="height: 49vw;overflow:hidden;">
<img class="poster" :src="item.src"/>
</div>
</template>
<template v-if="item.type === 2">
<div class="ranking-list">
<div class="desc">
<div class="top">
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="name">{{ item.desc }}</div>
</div>
<div class="bottom">
基于6亿抖音用户真实数据...
</div>
</div>
<div class="ads">
<div class="ad" v-for="(ad,index) in item.ads">
<div class="left">
<img class="ad-logo" :src="ad.src"/>
</div>
<div class="right">
<div class="rank">TOP{{ index + 1 }}</div>
<div class="name">{{ ad.name }}</div>
</div>
</div>
</div>
</div>
</template>
<template v-if="item.type === 3">
<div class="wrapper">
<img class="poster" :src="item.src"/>
<img :src="item.author" alt="" class="author">
<div class="live">直播中</div>
</div>
</template>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="goods"> <div class="item" v-for="item in right">
<div class="good"> <template v-if="item.type === 0">
<div class="notice"> <div class="wrapper">
<div class="ad-name">低价疯抢</div> <img class="poster" :src="item.src"/>
<div class="ad-desc">统一方便面</div> <img :src="item.author" alt="" class="author">
</div> </div>
<img class="good-img" src="../../assets/img/poster/1.jpg"/> <div class="location" v-if="item.address">
</div> <div class="top">
<div class="good"> <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="notice"> <div class="name">{{ item.address.name }}</div>
<div class="ad-name">低价疯抢</div> </div>
<div class="ad-desc">统一方便面</div> <div class="bottom">
<div class="type">{{ item.address.type }}</div>
<div class="line"></div>
<div class="other">{{ item.address.number }}人想去</div>
</div>
</div> </div>
<img class="good-img" src="../../assets/img/poster/1.jpg"/> </template>
</div> <template v-if="item.type === 1">
<div class="wrapper" style="height: 49vw;overflow:hidden;">
<img class="poster" :src="item.src"/>
</div>
</template>
<template v-if="item.type === 2">
<div class="ranking-list">
<div class="desc">
<div class="top">
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="name">{{ item.desc }}</div>
</div>
<div class="bottom">
基于6亿抖音用户真实数据...
</div>
</div>
<div class="ads">
<div class="ad" v-for="(ad,index) in item.ads">
<div class="left">
<img class="ad-logo" :src="ad.src"/>
</div>
<div class="right">
<div class="rank">TOP{{ index + 1 }}</div>
<div class="name">{{ ad.name }}</div>
</div>
</div>
</div>
</div>
</template>
<template v-if="item.type === 3">
<div class="wrapper">
<img class="poster" :src="item.src"/>
<img :src="item.author" alt="" class="author">
<div class="live">直播中</div>
</div>
</template>
</div> </div>
</div> </div>
</div> </div>
</div> <Loading :isFullScreen="false"></Loading>
<div ref="content" class="content">
<div class="left">
<div class="item" v-for="item in left">
<template v-if="item.type === 0">
<div class="wrapper">
<img class="poster" :src="item.src"/>
<img :src="item.author" alt="" class="author">
</div>
<div class="location" v-if="item.address">
<div class="top">
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="name">{{ item.address.name }}</div>
</div>
<div class="bottom">
<div class="type">{{ item.address.type }}</div>
<div class="line"></div>
<div class="other">{{ item.address.number }}人想去</div>
</div>
</div>
</template>
<template v-if="item.type === 1">
<div class="wrapper" style="height: 49vw;overflow:hidden;">
<img class="poster" :src="item.src"/>
</div>
</template>
<template v-if="item.type === 2">
<div class="ranking-list">
<div class="desc">
<div class="top">
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="name">{{ item.desc }}</div>
</div>
<div class="bottom">
基于6亿抖音用户真实数据...
</div>
</div>
<div class="ads">
<div class="ad" v-for="(ad,index) in item.ads">
<div class="left">
<img class="ad-logo" :src="ad.src"/>
</div>
<div class="right">
<div class="rank">TOP{{ index + 1 }}</div>
<div class="name">{{ ad.name }}</div>
</div>
</div>
</div>
</div>
</template>
<template v-if="item.type === 3">
<div class="wrapper">
<img class="poster" :src="item.src"/>
<img :src="item.author" alt="" class="author">
<div class="live">直播中</div>
</div>
</template>
</div>
</div>
<div class="right">
<div class="item" v-for="item in right">
<template v-if="item.type === 0">
<div class="wrapper">
<img class="poster" :src="item.src"/>
<img :src="item.author" alt="" class="author">
</div>
<div class="location" v-if="item.address">
<div class="top">
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="name">{{ item.address.name }}</div>
</div>
<div class="bottom">
<div class="type">{{ item.address.type }}</div>
<div class="line"></div>
<div class="other">{{ item.address.number }}人想去</div>
</div>
</div>
</template>
<template v-if="item.type === 1">
<div class="wrapper" style="height: 49vw;overflow:hidden;">
<img class="poster" :src="item.src"/>
</div>
</template>
<template v-if="item.type === 2">
<div class="ranking-list">
<div class="desc">
<div class="top">
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="name">{{ item.desc }}</div>
</div>
<div class="bottom">
基于6亿抖音用户真实数据...
</div>
</div>
<div class="ads">
<div class="ad" v-for="(ad,index) in item.ads">
<div class="left">
<img class="ad-logo" :src="ad.src"/>
</div>
<div class="right">
<div class="rank">TOP{{ index + 1 }}</div>
<div class="name">{{ ad.name }}</div>
</div>
</div>
</div>
</div>
</template>
<template v-if="item.type === 3">
<div class="wrapper">
<img class="poster" :src="item.src"/>
<img :src="item.author" alt="" class="author">
<div class="live">直播中</div>
</div>
</template>
</div>
</div>
</div> </div>
</div> </div>
<Footer v-bind:init-tab="2" style="position: fixed;"/> <Footer v-bind:init-tab="2" style="position: fixed;"/>
@ -267,26 +269,28 @@ export default {
}, },
methods: { methods: {
start(e) { start(e) {
let wrapper = this.$refs["scroll-wrapper"] let wrapper = this.$refs["wrapper"]
wrapper.style.transition = `none` wrapper.style.transition = `none`
this.startLocationY = e.touches[0].pageY this.startLocationY = e.touches[0].pageY
}, },
move(e) { move(e) {
let wrapper = this.$refs["scroll-wrapper"] let scroller = this.$refs["scroller"]
let wrapper = this.$refs["wrapper"]
let header = this.$refs["header"] let header = this.$refs["header"]
this.isTop = wrapper.scrollTop === 0 this.isTop = scroller.scrollTop === 0
console.log('scrollTop', wrapper.scrollTop) // console.log('scrollTop', scroller.scrollTop)
let touchMoveDistance = e.touches[0].pageY - this.startLocationY let touchMoveDistance = e.touches[0].pageY - this.startLocationY
console.log('touchMoveDistance', touchMoveDistance) console.log('touchMoveDistance', touchMoveDistance)
//
let headerHeight = 80
if (this.isTop) { if (this.isTop) {
// this.$setCss(wrapper,'tr') // this.$setCss(wrapper,'tr')
if (touchMoveDistance > 0) { if (touchMoveDistance > 0) {
let transformY = this.$getTransform(header) let transformY = this.$getTransform(header)
header.style.transform = `translate3d(0,${touchMoveDistance > 40 ? 40 : touchMoveDistance}px,0)` // header.style.transform = `translate3d(0,${touchMoveDistance > 40 ? 40 : touchMoveDistance}px,0)`
wrapper.style.transform = `translate3d(0,${touchMoveDistance > 40 ? 40 : touchMoveDistance}px,0)` wrapper.style.transform = `translate3d(0,${touchMoveDistance > headerHeight ? headerHeight : touchMoveDistance}px,0)`
}else { } else {
wrapper.style.transform = `translate3d(0,${touchMoveDistance < -40 ? -40 : touchMoveDistance}px,0)` wrapper.style.transform = `translate3d(0,${touchMoveDistance < -headerHeight ? -headerHeight : touchMoveDistance}px,0)`
} }
} else { } else {
// wrapper.style.height = '100vh' // wrapper.style.height = '100vh'
@ -295,7 +299,7 @@ export default {
console.log('isTop', this.isTop) console.log('isTop', this.isTop)
}, },
end() { end() {
let wrapper = this.$refs["scroll-wrapper"] let wrapper = this.$refs["wrapper"]
// wrapper.style.transition = `all .3s` // wrapper.style.transition = `all .3s`
// wrapper.style.transform = `translate3d(0,0,0)` // wrapper.style.transform = `translate3d(0,0,0)`
}, },
@ -308,15 +312,15 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
#attention { #attention {
/*background: rgb(22，24，34);*/ /*background: rgb(22，24，34);*/
/*background: #161822;*/ /*background: #161822;*/
//抖音原色，感觉很暗 //抖音原色，感觉很暗
$douyin-bg: #2e3244; @douyin-bg: #2e3244;
background: $douyin-bg; background: @douyin-bg;
color: #b8b9c1; color: #b8b9c1;
position: fixed; position: fixed;
left: 0; left: 0;
@ -325,17 +329,22 @@ export default {
top: 0; top: 0;
//overflow: auto; //overflow: auto;
.scroll-wrapper { .scroller {
height: calc(100vh - 10rem); height: calc(100vh - 10rem);
position: relative; position: relative;
overflow: scroll; overflow: scroll;
background: black;
.header { > .wrapper {
position: absolute; position: absolute;
top: -4rem; top: -8rem;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 2; z-index: 2;
> .header {
height: 8rem;
}
} }
} }
@ -346,7 +355,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
$arrow-width: 5px; @arrow-width: 5px;
.arrow { .arrow {
position: relative; position: relative;
@ -354,10 +363,10 @@ export default {
left: 5px; left: 5px;
width: 0; width: 0;
height: 0; height: 0;
border-top: $arrow-width solid white; border-top: @arrow-width solid white;
border-right: $arrow-width solid transparent; border-right: @arrow-width solid transparent;
border-bottom: $arrow-width solid transparent; border-bottom: @arrow-width solid transparent;
border-left: $arrow-width solid transparent; border-left: @arrow-width solid transparent;
} }
} }
@ -519,13 +528,13 @@ export default {
top: 1rem; top: 1rem;
left: 1rem; left: 1rem;
color: white; color: white;
background: $primary-btn-color; background: @primary-btn-color;
} }
} }
.location { .location {
padding: 8px 10px 10px 10px; padding: 8px 10px 10px 10px;
background: $douyin-bg; background: @douyin-bg;
.top, .bottom { .top, .bottom {
font-size: 1.4rem; font-size: 1.4rem;
@ -558,7 +567,7 @@ export default {
.ranking-list { .ranking-list {
padding: 2rem 1rem; padding: 2rem 1rem;
background: $douyin-bg; background: @douyin-bg;
.desc { .desc {
.top { .top {
@ -582,7 +591,7 @@ export default {
font-size: 1.2rem; font-size: 1.2rem;
.ad { .ad {
background: $second-btn-color; background: @second-btn-color;
display: flex; display: flex;
margin-top: 1rem; margin-top: 1rem;
@ -601,7 +610,7 @@ export default {
justify-content: center; justify-content: center;
.rank { .rank {
color: $second-text-color; color: @second-text-color;
margin-bottom: .2rem; margin-bottom: .2rem;
} }
} }

73
src/pages/home/Attention2.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<div>
<v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
<ul>
<li v-for="(item,index) in 50" >{{item.name}}</li>
<li v-for="(item,index) in 5" >{{item.name}}</li>
</ul>
</v-scroll>
</div>
</template>
<script>
import Scroll from './testt';
export default{
data () {
return {
counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
num : 15, // 一次显示多少条
pageStart : 0, // 开始页数
pageEnd : 0, // 结束页数
listdata: [], // 下拉更新数据存放数组
downdata: [] // 上拉更多的数据存放数组
}
},
mounted : function(){
this.getList();
},
methods: {
getList(){
let vm = this;
// vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
// vm.listdata = response.data.slice(0,15);
// }, (response) => {
// console.log('error');
// });
},
onRefresh(done) {
done()
return console.log('onRefresh')
this.getList();
done() // call done
},
onInfinite(done) {
return console.log('onInfinite')
let vm = this;
vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
vm.counter++;
vm.pageEnd = vm.num * vm.counter;
vm.pageStart = vm.pageEnd - vm.num;
let arr = response.data;
let i = vm.pageStart;
let end = vm.pageEnd;
for(; i<end; i++){
let obj ={};
obj["name"] = arr[i].name;
vm.downdata.push(obj);
if((i + 1) >= response.data.length){
this.$el.querySelector('.load-more').style.display = 'none';
return;
}
}
done() // call done
}, (response) => {
console.log('error');
});
}
},
components : {
'v-scroll': Scroll
}
}
</script>

2
src/pages/home/Index 布局完成.vue
View File

@ -587,7 +587,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
#home-index { #home-index {
height: 100%; height: 100%;
width: 100%; width: 100%;

2
src/pages/home/Index.vue
View File

@ -295,7 +295,7 @@ export default {
}, },
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
#home-index { #home-index {
height: 100%; height: 100%;
width: 100%; width: 100%;

2
src/pages/home/Index2.vue
View File

@ -575,7 +575,7 @@ export default {
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
#home-index { #home-index {
height: 100%; height: 100%;
width: 100%; width: 100%;

4
src/pages/home/Publish.vue
View File

@ -84,7 +84,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.Publish { .Publish {
@ -100,7 +100,7 @@ export default {
.footer { .footer {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
color: $second-text-color; color: @second-text-color;
.base-slide-item { .base-slide-item {
display: flex; display: flex;

2
src/pages/home/Test.vue
View File

@ -17,7 +17,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.Test { .Test {

191
src/pages/home/testt.vue Normal file
View File

@ -0,0 +1,191 @@
<template lang="html">
<div class="yo-scroll"
:class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"
@touchstart="touchStart($event)"
@touchmove="touchMove($event)"
@touchend="touchEnd($event)"
@scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
<section class="inner" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
<header class="pull-refresh">
<slot name="pull-refresh">
<span class="down-tip">下拉更新</span>
<span class="up-tip">松开更新</span>
<span class="refresh-tip">更新中</span>
</slot>
</header>
<slot></slot>
<footer class="load-more">
<slot name="load-more">
<span>加载中……</span>
</slot>
</footer>
</section>
</div>
</template>
<script>
export default {
props: {
offset: {
type: Number,
default: 40
},
enableInfinite: {
type: Boolean,
default: true
},
enableRefresh: {
type: Boolean,
default: true
},
onRefresh: {
type: Function,
default: undefined,
required: false
},
onInfinite: {
type: Function,
default: undefined,
require: false
}
},
data() {
return {
top: 0,
state: 0,
startY: 0,
touching: false,
infiniteLoading: false
}
},
methods: {
touchStart(e) {
this.startY = e.targetTouches[0].pageY
this.startScroll = this.$el.scrollTop || 0
this.touching = true
},
touchMove(e) {
if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
return
}
let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
if (diff > 0) e.preventDefault()
this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)
if (this.state === 2) { // in refreshing
return
}
if (this.top >= this.offset) {
this.state = 1
} else {
this.state = 0
}
},
touchEnd(e) {
if (!this.enableRefresh) return
this.touching = false
if (this.state === 2) { // in refreshing
this.state = 2
this.top = this.offset
return
}
if (this.top >= this.offset) { // do refresh
this.refresh()
} else { // cancel refresh
this.state = 0
this.top = 0
}
},
refresh() {
this.state = 2
this.top = this.offset
this.onRefresh(this.refreshDone)
},
refreshDone() {
this.state = 0
this.top = 0
},
infinite() {
this.infiniteLoading = true
this.onInfinite(this.infiniteDone)
},
infiniteDone() {
this.infiniteLoading = false
},
onScroll(e) {
if (!this.enableInfinite || this.infiniteLoading) {
return
}
let outerHeight = this.$el.clientHeight
let innerHeight = this.$el.querySelector('.inner').clientHeight
let scrollTop = this.$el.scrollTop
let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
let infiniteHeight = this.$el.querySelector('.load-more').clientHeight
let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
if (bottom < infiniteHeight) this.infinite()
}
}
}
</script>
<style>
.yo-scroll {
position: absolute;
top: 2.5rem;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #ddd
}
.yo-scroll .inner {
position: absolute;
top: -2rem;
width: 100%;
transition-duration: 300ms;
}
.yo-scroll .pull-refresh {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.yo-scroll.touch .inner {
transition-duration: 0ms;
}
.yo-scroll.down .down-tip {
display: block;
}
.yo-scroll.up .up-tip {
display: block;
}
.yo-scroll.refresh .refresh-tip {
display: block;
}
.yo-scroll .down-tip,
.yo-scroll .refresh-tip,
.yo-scroll .up-tip {
display: none;
}
.yo-scroll .load-more {
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
</style>

4
src/pages/login/Base.scss
View File

@ -19,14 +19,14 @@
.sub-title { .sub-title {
font-size: 1.2rem; font-size: 1.2rem;
color: $second-text-color; color: @second-text-color;
} }
} }
.notice { .notice {
margin-top: 1rem; margin-top: 1rem;
font-size: 1.3rem; font-size: 1.3rem;
color: $primary-btn-color; color: @primary-btn-color;
} }
.button { .button {

2
src/pages/login/Help.vue
View File

@ -27,7 +27,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.Help { .Help {

4
src/pages/login/Login.vue
View File

@ -94,7 +94,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.login { .login {
@ -130,7 +130,7 @@ export default {
.sub-title { .sub-title {
font-size: 1.2rem; font-size: 1.2rem;
color: $second-text-color; color: @second-text-color;
} }
} }

2
src/pages/login/OtherLogin.vue
View File

@ -115,7 +115,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
@import "Base.scss"; @import "Base.scss";

2
src/pages/login/PasswordLogin.vue
View File

@ -84,7 +84,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
@import "Base.scss"; @import "Base.scss";

2
src/pages/login/RetrievePassword.vue
View File

@ -128,7 +128,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
@import "Base.scss"; @import "Base.scss";

2
src/pages/login/VerificationCode.vue
View File

@ -90,7 +90,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
@import "Base.scss"; @import "Base.scss";

4
src/pages/login/components/LoginInput.vue
View File

@ -115,7 +115,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.input-number { .input-number {
@ -189,7 +189,7 @@ export default {
} }
.disabled { .disabled {
color: $second-text-color; color: @second-text-color;
} }
} }

2
src/pages/login/components/Tooltip.vue
View File

@ -25,7 +25,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.scale-enter-active, .scale-enter-active,

12
src/pages/login/countryChoose.vue
View File

@ -2432,7 +2432,7 @@ export default {
} }
</script> </script>
<style scoped lang='scss'> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.countryChoose { .countryChoose {
@ -2464,7 +2464,7 @@ export default {
justify-content: space-between; justify-content: space-between;
div { div {
color: $second-text-color; color: @second-text-color;
//transition: all .3s; //transition: all .3s;
font-size: 1rem; font-size: 1rem;
padding: .1rem; padding: .1rem;
@ -2475,7 +2475,7 @@ export default {
width: 0; width: 0;
height: 0; height: 0;
border: .5rem solid transparent; border: .5rem solid transparent;
border-bottom: 1rem solid $second-text-color; border-bottom: 1rem solid @second-text-color;
} }
} }
} }
@ -2498,7 +2498,7 @@ export default {
.top { .top {
padding-bottom: 1rem; padding-bottom: 1rem;
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
.cities { .cities {
.city { .city {
@ -2507,7 +2507,7 @@ export default {
border-radius: .2rem; border-radius: .2rem;
height: 4rem; height: 4rem;
line-height: 4rem; line-height: 4rem;
background: $second-btn-color-tran; background: @second-btn-color-tran;
display: inline-block; display: inline-block;
width: 32%; width: 32%;
text-align: center; text-align: center;
@ -2519,7 +2519,7 @@ export default {
//padding-right: 2.5rem; //padding-right: 2.5rem;
.row { .row {
background: $main-bg; background: @main-bg;
} }
} }
} }

24
src/pages/me/Me.vue
View File

@ -301,7 +301,7 @@ export default {
} }
</script> </script>
<style scoped lang='scss'> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.fade-enter-active, .fade-enter-active,
@ -316,7 +316,7 @@ export default {
} }
.Me { .Me {
background: $main-bg; background: @main-bg;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -370,7 +370,7 @@ export default {
} }
.detail { .detail {
background: $main-bg; background: @main-bg;
padding: 0 20px; padding: 0 20px;
.head { .head {
@ -397,7 +397,7 @@ export default {
justify-content: center; justify-content: center;
float: left; float: left;
border-radius: 2px; border-radius: 2px;
background: $second-btn-color; background: @second-btn-color;
margin-left: 5px; margin-left: 5px;
padding: 0 10px; padding: 0 10px;
height: 30px; height: 30px;
@ -422,9 +422,9 @@ export default {
transform: translateY(-20px); transform: translateY(-20px);
.number { .number {
color: $second-text-color; color: @second-text-color;
padding-bottom: 2rem; padding-bottom: 2rem;
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
display: flex; display: flex;
align-items: center; align-items: center;
@ -466,7 +466,7 @@ export default {
margin: 0; margin: 0;
position: absolute; position: absolute;
color: white; color: white;
background: $main-bg; background: @main-bg;
.line { .line {
height: 1px; height: 1px;
@ -477,7 +477,7 @@ export default {
.li { .li {
box-sizing: border-box; box-sizing: border-box;
background: $main-bg; background: @main-bg;
width: 100%; width: 100%;
padding: 1rem 2rem; padding: 1rem 2rem;
list-style: none; list-style: none;
@ -506,7 +506,7 @@ export default {
font-size: 1.2rem; font-size: 1.2rem;
width: 100%; width: 100%;
position: absolute; position: absolute;
background: $main-bg; background: @main-bg;
.title { .title {
padding: 2rem 0 1rem 2rem; padding: 2rem 0 1rem 2rem;
@ -528,7 +528,7 @@ export default {
img { img {
border-radius: 50%; border-radius: 50%;
background: $second-btn-color-tran; background: @second-btn-color-tran;
padding: .6rem; padding: .6rem;
height: 1.6rem; height: 1.6rem;
margin-bottom: 15px; margin-bottom: 15px;
@ -543,12 +543,12 @@ export default {
width: 70vw; width: 70vw;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
background: $main-bg; background: @main-bg;
.button { .button {
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - 4rem); width: calc(100% - 4rem);
background: $second-btn-color; background: @second-btn-color;
margin: 2rem; margin: 2rem;
height: 4.5rem; height: 4.5rem;
border-radius: 3px; border-radius: 3px;

50
src/pages/me/Me2.vue
View File

@ -755,7 +755,7 @@ export default {
} }
</script> </script>
<style scoped lang='scss'> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.fade1-enter-active, .fade1-enter-active,
@ -770,7 +770,7 @@ export default {
} }
.Me { .Me {
background: $main-bg; background: @main-bg;
height: 100%; height: 100%;
width: 100%; width: 100%;
font-size: 1.4rem; font-size: 1.4rem;
@ -790,7 +790,7 @@ export default {
.notice { .notice {
font-size: 1.2rem; font-size: 1.2rem;
height: 4rem; height: 4rem;
color: $second-text-color; color: @second-text-color;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -805,7 +805,7 @@ export default {
padding: .7rem; padding: .7rem;
.video { .video {
background: $active-main-bg; background: @active-main-bg;
border-radius: .5rem; border-radius: .5rem;
padding: 1rem; padding: 1rem;
margin-bottom: .7rem; margin-bottom: .7rem;
@ -830,7 +830,7 @@ export default {
.right { .right {
display: flex; display: flex;
align-items: center; align-items: center;
color: $second-text-color; color: @second-text-color;
} }
} }
@ -871,7 +871,7 @@ export default {
} }
.audio { .audio {
background: $active-main-bg; background: @active-main-bg;
border-radius: .5rem; border-radius: .5rem;
padding: 1rem; padding: 1rem;
@ -895,7 +895,7 @@ export default {
.right { .right {
display: flex; display: flex;
align-items: center; align-items: center;
color: $second-text-color; color: @second-text-color;
} }
} }
@ -917,7 +917,7 @@ export default {
.title { .title {
margin-top: .5rem; margin-top: .5rem;
color: $second-text-color; color: @second-text-color;
} }
} }
} }
@ -945,10 +945,10 @@ export default {
} }
&.fixed { &.fixed {
background: $main-bg; background: @main-bg;
img { img {
background: $main-bg !important; background: @main-bg !important;
} }
} }
@ -991,7 +991,7 @@ export default {
} }
.detail { .detail {
background: $main-bg; background: @main-bg;
padding: 0 2rem; padding: 0 2rem;
.head { .head {
@ -1022,7 +1022,7 @@ export default {
justify-content: center; justify-content: center;
float: left; float: left;
border-radius: .2rem; border-radius: .2rem;
background: $second-btn-color; background: @second-btn-color;
margin-left: .5rem; margin-left: .5rem;
padding: 0 1rem; padding: 0 1rem;
height: 3rem; height: 3rem;
@ -1052,7 +1052,7 @@ export default {
transform: translateY(-2rem); transform: translateY(-2rem);
.signature { .signature {
//color: $second-text-color; //color: @second-text-color;
color: white; color: white;
font-size: 1.3rem; font-size: 1.3rem;
display: flex; display: flex;
@ -1066,13 +1066,13 @@ export default {
} }
.more { .more {
color: $second-text-color; color: @second-text-color;
display: flex; display: flex;
.item { .item {
padding: .2rem .5rem; padding: .2rem .5rem;
border-radius: .2rem; border-radius: .2rem;
background: $second-btn-color-tran; background: @second-btn-color-tran;
font-size: 1rem; font-size: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1086,9 +1086,9 @@ export default {
} }
.number { .number {
color: $second-text-color; color: @second-text-color;
padding-bottom: 2rem; padding-bottom: 2rem;
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1129,7 +1129,7 @@ export default {
img { img {
margin-right: .8rem; margin-right: .8rem;
border-radius: .4rem; border-radius: .4rem;
background: $second-btn-color-tran; background: @second-btn-color-tran;
padding: .8rem; padding: .8rem;
height: 2.2rem; height: 2.2rem;
} }
@ -1145,7 +1145,7 @@ export default {
} }
.bottom { .bottom {
color: $second-text-color; color: @second-text-color;
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
@ -1164,7 +1164,7 @@ export default {
margin: 0; margin: 0;
position: absolute; position: absolute;
color: white; color: white;
background: $main-bg; background: @main-bg;
.line { .line {
height: 1px; height: 1px;
@ -1175,7 +1175,7 @@ export default {
.li { .li {
box-sizing: border-box; box-sizing: border-box;
background: $main-bg; background: @main-bg;
width: 100%; width: 100%;
padding: 1rem 2rem; padding: 1rem 2rem;
list-style: none; list-style: none;
@ -1204,7 +1204,7 @@ export default {
font-size: 1.2rem; font-size: 1.2rem;
width: 100%; width: 100%;
position: absolute; position: absolute;
background: $main-bg; background: @main-bg;
.title { .title {
padding: 2rem 0 1rem 2rem; padding: 2rem 0 1rem 2rem;
@ -1226,7 +1226,7 @@ export default {
img { img {
border-radius: 50%; border-radius: 50%;
background: $second-btn-color-tran; background: @second-btn-color-tran;
padding: .6rem; padding: .6rem;
height: 1.6rem; height: 1.6rem;
margin-bottom: 15px; margin-bottom: 15px;
@ -1241,12 +1241,12 @@ export default {
width: 70vw; width: 70vw;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
background: $main-bg; background: @main-bg;
.button { .button {
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - 4rem); width: calc(100% - 4rem);
background: $second-btn-color; background: @second-btn-color;
margin: 2rem; margin: 2rem;
height: 4.5rem; height: 4.5rem;
border-radius: 3px; border-radius: 3px;

48
src/pages/me/Me3.vue
View File

@ -734,7 +734,7 @@ export default {
} }
</script> </script>
<style scoped lang='scss'> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.fade1-enter-active, .fade1-enter-active,
@ -749,7 +749,7 @@ export default {
} }
.Me { .Me {
background: $main-bg; background: @main-bg;
height: 100%; height: 100%;
width: 100%; width: 100%;
font-size: 1.4rem; font-size: 1.4rem;
@ -759,7 +759,7 @@ export default {
.notice { .notice {
font-size: 1.2rem; font-size: 1.2rem;
height: 4rem; height: 4rem;
color: $second-text-color; color: @second-text-color;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -774,7 +774,7 @@ export default {
padding: .7rem; padding: .7rem;
.video { .video {
background: $active-main-bg; background: @active-main-bg;
border-radius: .5rem; border-radius: .5rem;
padding: 1rem; padding: 1rem;
margin-bottom: .7rem; margin-bottom: .7rem;
@ -799,7 +799,7 @@ export default {
.right { .right {
display: flex; display: flex;
align-items: center; align-items: center;
color: $second-text-color; color: @second-text-color;
} }
} }
@ -840,7 +840,7 @@ export default {
} }
.audio { .audio {
background: $active-main-bg; background: @active-main-bg;
border-radius: .5rem; border-radius: .5rem;
padding: 1rem; padding: 1rem;
@ -864,7 +864,7 @@ export default {
.right { .right {
display: flex; display: flex;
align-items: center; align-items: center;
color: $second-text-color; color: @second-text-color;
} }
} }
@ -886,7 +886,7 @@ export default {
.title { .title {
margin-top: .5rem; margin-top: .5rem;
color: $second-text-color; color: @second-text-color;
} }
} }
} }
@ -914,10 +914,10 @@ export default {
} }
&.fixed { &.fixed {
background: $main-bg; background: @main-bg;
img { img {
background: $main-bg !important; background: @main-bg !important;
} }
} }
@ -962,7 +962,7 @@ export default {
} }
.detail { .detail {
background: $main-bg; background: @main-bg;
padding: 0 2rem; padding: 0 2rem;
.head { .head {
@ -984,7 +984,7 @@ export default {
.heat { .heat {
margin-top: 1rem; margin-top: 1rem;
width: calc(100% - 12rem); width: calc(100% - 12rem);
color: $second-text-color; color: @second-text-color;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -1015,9 +1015,9 @@ export default {
transform: translateY(-2rem); transform: translateY(-2rem);
.number { .number {
color: $second-text-color; color: @second-text-color;
padding-bottom: 2rem; padding-bottom: 2rem;
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1030,7 +1030,7 @@ export default {
} }
.signature { .signature {
color: $second-text-color; color: @second-text-color;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: .5rem; margin-bottom: .5rem;
@ -1042,13 +1042,13 @@ export default {
} }
.more { .more {
color: $second-text-color; color: @second-text-color;
display: flex; display: flex;
.item { .item {
padding: .2rem .5rem; padding: .2rem .5rem;
border-radius: .2rem; border-radius: .2rem;
background: $second-btn-color-tran; background: @second-btn-color-tran;
font-size: 1rem; font-size: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1072,7 +1072,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: .2rem; border-radius: .2rem;
background: $second-btn-color; background: @second-btn-color;
height: 3rem; height: 3rem;
color: white; color: white;
} }
@ -1091,7 +1091,7 @@ export default {
margin: 0; margin: 0;
position: absolute; position: absolute;
color: white; color: white;
background: $main-bg; background: @main-bg;
.line { .line {
height: 1px; height: 1px;
@ -1102,7 +1102,7 @@ export default {
.li { .li {
box-sizing: border-box; box-sizing: border-box;
background: $main-bg; background: @main-bg;
width: 100%; width: 100%;
padding: 1rem 2rem; padding: 1rem 2rem;
list-style: none; list-style: none;
@ -1131,7 +1131,7 @@ export default {
font-size: 1.2rem; font-size: 1.2rem;
width: 100%; width: 100%;
position: absolute; position: absolute;
background: $main-bg; background: @main-bg;
.title { .title {
padding: 2rem 0 1rem 2rem; padding: 2rem 0 1rem 2rem;
@ -1153,7 +1153,7 @@ export default {
img { img {
border-radius: 50%; border-radius: 50%;
background: $second-btn-color-tran; background: @second-btn-color-tran;
padding: .6rem; padding: .6rem;
height: 1.6rem; height: 1.6rem;
margin-bottom: 15px; margin-bottom: 15px;
@ -1168,12 +1168,12 @@ export default {
width: 70vw; width: 70vw;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
background: $main-bg; background: @main-bg;
.button { .button {
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - 4rem); width: calc(100% - 4rem);
background: $second-btn-color; background: @second-btn-color;
margin: 2rem; margin: 2rem;
height: 4.5rem; height: 4.5rem;
border-radius: 3px; border-radius: 3px;

5
src/pages/me/MyCard.vue
View File

@ -45,7 +45,7 @@ export default {
} }
</script> </script>
<style scoped lang='scss'> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
#MyCard { #MyCard {
@ -59,7 +59,7 @@ export default {
.content { .content {
padding-top: $header-height; padding-top: @header-height;
.card { .card {
margin: 3rem; margin: 3rem;
@ -128,5 +128,4 @@ export default {
} }
} }
</style> </style>

2
src/pages/me/MyCollect.vue
View File

@ -137,7 +137,7 @@
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
#MyCollect { #MyCollect {
width: 100vw; width: 100vw;
height: 100%; height: 100%;

14
src/pages/me/VideoDetail.vue
View File

@ -370,7 +370,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
@ -405,8 +405,8 @@ export default {
} }
.share-to-friend { .share-to-friend {
color: $second-text-color; color: @second-text-color;
height: $footer-height; height: @footer-height;
z-index: 9; z-index: 9;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -427,8 +427,8 @@ export default {
} }
.permission-setting { .permission-setting {
color: $second-text-color; color: @second-text-color;
height: $footer-height; height: @footer-height;
z-index: 9; z-index: 9;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -516,7 +516,7 @@ export default {
font-size: 1.4rem; font-size: 1.4rem;
color: white; color: white;
padding: 5px 20px; padding: 5px 20px;
background: $primary-btn-color; background: @primary-btn-color;
border-radius: 2px; border-radius: 2px;
} }
} }
@ -559,7 +559,7 @@ export default {
font-size: 1.4rem; font-size: 1.4rem;
color: white; color: white;
padding: 5px 20px; padding: 5px 20px;
background: $primary-btn-color; background: @primary-btn-color;
border-radius: 2px; border-radius: 2px;
} }
} }

4
src/pages/me/rightMenu/LookHistory.vue
View File

@ -63,7 +63,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.lookHistory { .lookHistory {
@ -94,7 +94,7 @@ export default {
.subtitle { .subtitle {
font-size: 1.3rem; font-size: 1.3rem;
margin-top: 1rem; margin-top: 1rem;
color: $second-text-color; color: @second-text-color;
} }
} }
} }

6
src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
View File

@ -85,7 +85,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../../assets/scss/index"; @import "../../../../assets/scss/index";
.DetailSetting { .DetailSetting {
@ -99,7 +99,7 @@ export default {
font-size: 1.4rem; font-size: 1.4rem;
.content { .content {
padding-top: $header-height; padding-top: @header-height;
} }
.footer { .footer {
@ -122,7 +122,7 @@ export default {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
font-size: 1.6rem; font-size: 1.6rem;
color: $second-text-color; color: @second-text-color;
img { img {
width: 1.5rem; width: 1.5rem;

2
src/pages/me/rightMenu/MinorProtection/Index.vue
View File

@ -43,7 +43,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../../assets/scss/index"; @import "../../../../assets/scss/index";
.index { .index {

2
src/pages/me/rightMenu/MinorProtection/TriggerTime.vue
View File

@ -56,7 +56,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../../assets/scss/index"; @import "../../../../assets/scss/index";
.TriggerTime { .TriggerTime {

8
src/pages/me/rightMenu/Setting.vue
View File

@ -197,7 +197,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.Setting { .Setting {
@ -214,13 +214,13 @@ export default {
padding-top: 6rem; padding-top: 6rem;
.title { .title {
color: $second-text-color; color: @second-text-color;
font-size: 1.3rem; font-size: 1.3rem;
margin: 2rem 0 0 2rem; margin: 2rem 0 0 2rem;
} }
.version { .version {
color: $second-text-color; color: @second-text-color;
font-size: 1.3rem; font-size: 1.3rem;
margin: 4rem; margin: 4rem;
text-align: center; text-align: center;
@ -229,7 +229,7 @@ export default {
.line { .line {
width: calc(100% - 3rem); width: calc(100% - 3rem);
margin-left: 1.5rem; margin-left: 1.5rem;
background: $line-color; background: @line-color;
} }
} }
} }

6
src/pages/me/userinfo/AddSchool.vue
View File

@ -161,7 +161,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.school { .school {
@ -179,11 +179,11 @@ export default {
} }
.save-yes { .save-yes {
color: $primary-btn-color; color: @primary-btn-color;
} }
.save-no { .save-no {
color: $disable-primary-btn-color; color: @disable-primary-btn-color;
} }

10
src/pages/me/userinfo/ChooseCity.vue
View File

@ -66,7 +66,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.choose-location { .choose-location {
@ -103,13 +103,13 @@ export default {
height: 5rem; height: 5rem;
font-size: 1.4rem; font-size: 1.4rem;
transition: all .1s; transition: all .1s;
background: $main-bg; background: @main-bg;
.right { .right {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: $second-text-color; color: @second-text-color;
img { img {
margin-left: 1rem; margin-left: 1rem;
@ -118,8 +118,8 @@ export default {
} }
&:active { &:active {
background: $active-main-bg; background: @active-main-bg;
color: $second-text-color; color: @second-text-color;
} }
} }
} }

8
src/pages/me/userinfo/ChooseDepartment.vue
View File

@ -51,7 +51,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.choose-school { .choose-school {
@ -75,11 +75,11 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
transition: all .1s; transition: all .1s;
background: $main-bg; background: @main-bg;
&:active { &:active {
background: $active-main-bg; background: @active-main-bg;
color: $second-text-color; color: @second-text-color;
} }
} }
} }

12
src/pages/me/userinfo/ChooseLocation.vue
View File

@ -1205,7 +1205,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.choose-location { .choose-location {
@ -1226,7 +1226,7 @@ export default {
.title { .title {
font-size: 1.2rem; font-size: 1.2rem;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
color: $second-text-color; color: @second-text-color;
img { img {
width: 1rem; width: 1rem;
@ -1243,13 +1243,13 @@ export default {
height: 5rem; height: 5rem;
font-size: 1.4rem; font-size: 1.4rem;
transition: all .1s; transition: all .1s;
background: $main-bg; background: @main-bg;
.right { .right {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: $second-text-color; color: @second-text-color;
img { img {
margin-left: 1rem; margin-left: 1rem;
@ -1258,8 +1258,8 @@ export default {
} }
&:active { &:active {
background: $active-main-bg; background: @active-main-bg;
color: $second-text-color; color: @second-text-color;
} }
} }
} }

10
src/pages/me/userinfo/ChooseProvince.vue
View File

@ -35,7 +35,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.choose-location { .choose-location {
@ -72,13 +72,13 @@ export default {
height: 5rem; height: 5rem;
font-size: 1.4rem; font-size: 1.4rem;
transition: all .1s; transition: all .1s;
background: $main-bg; background: @main-bg;
.right { .right {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: $second-text-color; color: @second-text-color;
img { img {
margin-left: 1rem; margin-left: 1rem;
@ -87,8 +87,8 @@ export default {
} }
&:active { &:active {
background: $active-main-bg; background: @active-main-bg;
color: $second-text-color; color: @second-text-color;
} }
} }
} }

12
src/pages/me/userinfo/ChooseSchool.vue
View File

@ -96,7 +96,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.choose-school { .choose-school {
@ -134,11 +134,11 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
transition: all .1s; transition: all .1s;
background: $main-bg; background: @main-bg;
&:active { &:active {
background: $active-main-bg; background: @active-main-bg;
color: $second-text-color; color: @second-text-color;
} }
} }
@ -151,7 +151,7 @@ export default {
} }
.sub-title { .sub-title {
color: $second-text-color; color: @second-text-color;
margin-top: 2rem; margin-top: 2rem;
font-size: 1.4rem; font-size: 1.4rem;
} }
@ -165,7 +165,7 @@ export default {
.btn { .btn {
margin-top: 15rem; margin-top: 15rem;
display: inline-block; display: inline-block;
background: $second-btn-color; background: @second-btn-color;
padding: 1.5rem 4rem; padding: 1.5rem 4rem;
border-radius: 2px; border-radius: 2px;
} }

10
src/pages/me/userinfo/DeclareSchool.vue
View File

@ -57,7 +57,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.declare-school { .declare-school {
@ -89,7 +89,7 @@ export default {
border-top: none; border-top: none;
border-right: none; border-right: none;
border-left: none; border-left: none;
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
color: white; color: white;
} }
} }
@ -109,7 +109,7 @@ export default {
padding: 1.2rem 0; padding: 1.2rem 0;
display: flex; display: flex;
align-items: center; align-items: center;
color: $second-text-color; color: @second-text-color;
img { img {
margin-left: 5px; margin-left: 5px;
@ -122,7 +122,7 @@ export default {
.notice { .notice {
margin-top: 2rem; margin-top: 2rem;
color: $second-text-color; color: @second-text-color;
} }
.btn { .btn {
@ -132,7 +132,7 @@ export default {
right: 2rem; right: 2rem;
color: white; color: white;
font-size: 1.6rem; font-size: 1.6rem;
background: $primary-btn-color; background: @primary-btn-color;
text-align: center; text-align: center;
padding: 1rem 0; padding: 1rem 0;
border-radius: 2px; border-radius: 2px;

2
src/pages/me/userinfo/DisplayType.vue
View File

@ -51,7 +51,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.DisplayType { .DisplayType {

14
src/pages/me/userinfo/EditUserInfo.vue
View File

@ -146,7 +146,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.edit { .edit {
@ -165,7 +165,7 @@ export default {
align-items: center; align-items: center;
.sub { .sub {
color: $second-text-color; color: @second-text-color;
} }
} }
@ -179,7 +179,7 @@ export default {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin: 3rem 0; margin: 3rem 0;
$avatar-width: 7rem; @avatar-width: 7rem;
.avatar-ctn { .avatar-ctn {
position: relative; position: relative;
@ -188,14 +188,14 @@ export default {
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 1rem;
width: $avatar-width; width: @avatar-width;
height: $avatar-width; height: @avatar-width;
.avatar { .avatar {
opacity: .5; opacity: .5;
position: absolute; position: absolute;
width: $avatar-width; width: @avatar-width;
height: $avatar-width; height: @avatar-width;
border-radius: 50%; border-radius: 50%;
} }

16
src/pages/me/userinfo/EditUserInfoItem.vue
View File

@ -103,7 +103,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.edit-item { .edit-item {
@ -114,11 +114,11 @@ export default {
top: 0; top: 0;
.save-yes { .save-yes {
color: $primary-btn-color; color: @primary-btn-color;
} }
.save-no { .save-no {
color: $disable-primary-btn-color; color: @disable-primary-btn-color;
} }
.content { .content {
@ -127,12 +127,12 @@ export default {
.notice, .num { .notice, .num {
font-size: 1.2rem; font-size: 1.2rem;
color: $second-text-color; color: @second-text-color;
} }
.input-ctn { .input-ctn {
position: relative; position: relative;
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
display: flex; display: flex;
align-items: center; align-items: center;
@ -146,7 +146,7 @@ export default {
background: transparent; background: transparent;
&::placeholder { &::placeholder {
color: $second-text-color; color: @second-text-color;
} }
} }
@ -160,7 +160,7 @@ export default {
.textarea-ctn { .textarea-ctn {
width: 100%; width: 100%;
background: $active-main-bg; background: @active-main-bg;
padding: 1.5rem; padding: 1.5rem;
box-sizing: border-box; box-sizing: border-box;
margin-top: 1rem; margin-top: 1rem;
@ -176,7 +176,7 @@ export default {
color: white; color: white;
&::placeholder { &::placeholder {
color: $second-text-color; color: @second-text-color;
} }
} }
} }

12
src/pages/me/我的动态.vue
View File

@ -99,7 +99,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
#attention { #attention {
/*background: rgb(22，24，34);*/ /*background: rgb(22，24，34);*/
/*background: #161822;*/ /*background: #161822;*/
@ -114,7 +114,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
$arrow-width: 5px; @arrow-width: 5px;
.arrow { .arrow {
position: relative; position: relative;
@ -122,10 +122,10 @@ export default {
left: 5px; left: 5px;
width: 0; width: 0;
height: 0; height: 0;
border-top: $arrow-width solid white; border-top: @arrow-width solid white;
border-right: $arrow-width solid transparent; border-right: @arrow-width solid transparent;
border-bottom: $arrow-width solid transparent; border-bottom: @arrow-width solid transparent;
border-left: $arrow-width solid transparent; border-left: @arrow-width solid transparent;
} }
} }

36
src/pages/message/Chat.vue
View File

@ -386,7 +386,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.Chat { .Chat {
@ -400,16 +400,16 @@ export default {
.header { .header {
z-index: 2; z-index: 2;
background: $main-bg; background: @main-bg;
position: fixed; position: fixed;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
height: $header-height; height: @header-height;
padding: 0 1rem; padding: 0 1rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
img { img {
height: 2rem; height: 2rem;
@ -429,7 +429,7 @@ export default {
padding: 1px 6px; padding: 1px 6px;
border-radius: 10px; border-radius: 10px;
color: white; color: white;
background: $second-btn-color; background: @second-btn-color;
} }
} }
} }
@ -445,22 +445,22 @@ export default {
} }
.footer { .footer {
$chat-bg-color: rgb(105, 143, 244); @chat-bg-color: rgb(105, 143, 244);
$typing-bg-color: whitesmoke; @typing-bg-color: whitesmoke;
background: $main-bg; background: @main-bg;
$normal-bg-color: rgb(35, 38, 47); @normal-bg-color: rgb(35, 38, 47);
padding: 1rem 0; padding: 1rem 0;
border-top: 1px solid $second-btn-color-tran; border-top: 1px solid @second-btn-color-tran;
&.typing { &.typing {
background: white; background: white;
.toolbar { .toolbar {
background: $typing-bg-color; background: @typing-bg-color;
} }
input { input {
background: $typing-bg-color !important; background: @typing-bg-color !important;
} }
} }
@ -469,7 +469,7 @@ export default {
height: 4.4rem; height: 4.4rem;
margin: 0 1rem; margin: 0 1rem;
padding: .5rem; padding: .5rem;
background: $normal-bg-color; background: @normal-bg-color;
border-radius: 2rem; border-radius: 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
@ -484,7 +484,7 @@ export default {
flex: 1; flex: 1;
outline: none; outline: none;
border: none; border: none;
background: $normal-bg-color; background: @normal-bg-color;
} }
.camera { .camera {
@ -493,7 +493,7 @@ export default {
width: 1.4rem; width: 1.4rem;
padding: .5rem; padding: .5rem;
border-radius: 50%; border-radius: 50%;
background: $chat-bg-color; background: @chat-bg-color;
} }
} }
@ -503,7 +503,7 @@ export default {
height: 4.4rem; height: 4.4rem;
margin: 0 1rem; margin: 0 1rem;
padding: 1rem .5rem; padding: 1rem .5rem;
background: $normal-bg-color; background: @normal-bg-color;
border-radius: 2rem; border-radius: 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
@ -528,10 +528,10 @@ export default {
.option-wrapper { .option-wrapper {
box-sizing: border-box; box-sizing: border-box;
$grid-width: calc((100vw - 3rem) / 4); @grid-width: calc((100vw - 3rem) / 4);
color: black; color: black;
display: grid; display: grid;
grid-template-columns:$grid-width $grid-width $grid-width $grid-width; grid-template-columns:@grid-width @grid-width @grid-width @grid-width;
.option { .option {
display: flex; display: flex;

8
src/pages/message/ChatDetail.vue
View File

@ -100,7 +100,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.ChatDetail { .ChatDetail {
@ -120,7 +120,7 @@ export default {
padding: 0 2rem; padding: 0 2rem;
.People { .People {
border-bottom: 1px solid $second-btn-color-tran; border-bottom: 1px solid @second-btn-color-tran;
} }
} }
@ -146,7 +146,7 @@ export default {
color: black; color: black;
.notice { .notice {
color: $second-text-color; color: @second-text-color;
font-size: 1.2rem; font-size: 1.2rem;
height: 4rem; height: 4rem;
display: flex; display: flex;
@ -166,7 +166,7 @@ export default {
} }
&.red{ &.red{
color: $primary-btn-color; color: @primary-btn-color;
} }
} }

38
src/pages/message/Message.vue
View File

@ -236,7 +236,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
#Message { #Message {
@ -248,7 +248,7 @@ export default {
//height: 100%; //height: 100%;
//width: 100%; //width: 100%;
overflow: auto; overflow: auto;
background: $main-bg; background: @main-bg;
padding-bottom: 6rem; padding-bottom: 6rem;
color: white; color: white;
@ -256,7 +256,7 @@ export default {
padding-bottom: 6rem; padding-bottom: 6rem;
.joined-chat { .joined-chat {
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
height: 5rem; height: 5rem;
padding: 0 2rem; padding: 0 2rem;
display: flex; display: flex;
@ -327,7 +327,7 @@ export default {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: $main-bg; background: @main-bg;
//background: red; //background: red;
display: flex; display: flex;
align-items: center; align-items: center;
@ -345,7 +345,7 @@ export default {
border-radius: .2rem; border-radius: .2rem;
&.primary { &.primary {
background: $primary-btn-color; background: @primary-btn-color;
} }
} }
} }
@ -386,7 +386,7 @@ export default {
.account { .account {
font-size: 1.3rem; font-size: 1.3rem;
color: $second-text-color; color: @second-text-color;
} }
} }
@ -411,7 +411,7 @@ export default {
.notice-h2 { .notice-h2 {
margin-top: 1rem; margin-top: 1rem;
font-size: 1.4rem; font-size: 1.4rem;
color: $second-text-color; color: @second-text-color;
} }
} }
@ -472,7 +472,7 @@ export default {
.num { .num {
margin-left: .5rem; margin-left: .5rem;
color: $second-text-color; color: @second-text-color;
} }
} }
@ -543,7 +543,7 @@ export default {
span { span {
color: $second-text-color; color: @second-text-color;
display: block; display: block;
text-align: center; text-align: center;
word-break: break-all; word-break: break-all;
@ -552,7 +552,7 @@ export default {
} }
.line { .line {
border-top: 1px solid $line-color; border-top: 1px solid @line-color;
} }
.requests { .requests {
@ -562,7 +562,7 @@ export default {
padding: 20px 0; padding: 20px 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
.right { .right {
display: flex; display: flex;
@ -627,7 +627,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 15px 0 15px 0; padding: 15px 0 15px 0;
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
.left { .left {
.name { .name {
@ -639,14 +639,14 @@ export default {
.tag { .tag {
margin-left: 5px; margin-left: 5px;
font-size: 1rem; font-size: 1rem;
background: $line-color; background: @line-color;
padding: 2px 5px; padding: 2px 5px;
border-radius: 2px; border-radius: 2px;
} }
} }
.detail { .detail {
color: $second-text-color; color: @second-text-color;
font-size: 1.2rem; font-size: 1.2rem;
margin-top: 4px; margin-top: 4px;
@ -693,7 +693,7 @@ export default {
} }
.not-more { .not-more {
color: $second-text-color; color: @second-text-color;
text-align: center; text-align: center;
padding: 20px; padding: 20px;
} }
@ -707,7 +707,7 @@ export default {
align-items: center; align-items: center;
.left { .left {
color: $second-text-color; color: @second-text-color;
img { img {
width: 10px; width: 10px;
@ -717,7 +717,7 @@ export default {
.right { .right {
border-radius: 50%; border-radius: 50%;
background: $second-text-color; background: @second-text-color;
padding: 5px; padding: 5px;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -757,7 +757,7 @@ export default {
} }
.detail { .detail {
color: $second-text-color; color: @second-text-color;
font-size: 1.2rem; font-size: 1.2rem;
margin-top: 4px; margin-top: 4px;
} }
@ -769,7 +769,7 @@ export default {
align-items: center; align-items: center;
.button { .button {
background: $primary-btn-color; background: @primary-btn-color;
margin-left: 8px; margin-left: 8px;
padding: 8px 20px; padding: 8px 20px;
border-radius: 3px; border-radius: 3px;

12
src/pages/message/SetRemark.vue
View File

@ -62,7 +62,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.edit-item { .edit-item {
@ -73,11 +73,11 @@ export default {
top: 0; top: 0;
.save-yes { .save-yes {
color: $primary-btn-color; color: @primary-btn-color;
} }
.save-no { .save-no {
color: $disable-primary-btn-color; color: @disable-primary-btn-color;
} }
.content { .content {
@ -86,12 +86,12 @@ export default {
.notice, .num { .notice, .num {
font-size: 1.2rem; font-size: 1.2rem;
color: $second-text-color; color: @second-text-color;
} }
.input-ctn { .input-ctn {
position: relative; position: relative;
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
display: flex; display: flex;
align-items: center; align-items: center;
@ -105,7 +105,7 @@ export default {
background: transparent; background: transparent;
&::placeholder { &::placeholder {
color: $second-text-color; color: @second-text-color;
} }
} }

22
src/pages/message/components/ChatMessage.vue
View File

@ -159,15 +159,15 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.ChatMessage { .ChatMessage {
padding: 0 1rem; padding: 0 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
display: flex; display: flex;
//$chat-bg-color: dodgerblue; //@chat-bg-color: dodgerblue;
$chat-bg-color: rgb(105, 143, 244); @chat-bg-color: rgb(105, 143, 244);
&.right { &.right {
justify-content: flex-end; justify-content: flex-end;
@ -199,7 +199,7 @@ export default {
.time { .time {
width: 100%; width: 100%;
color: $second-text-color; color: @second-text-color;
text-align: center; text-align: center;
height: 4rem; height: 4rem;
line-height: 4rem; line-height: 4rem;
@ -207,16 +207,16 @@ export default {
.red_packet { .red_packet {
border-radius: .3rem; border-radius: .3rem;
$not-received: rgb(253, 92, 72); @not-received: rgb(253, 92, 72);
$received: rgba(253, 92, 72, .8); @received: rgba(253, 92, 72, .8);
width: 60vw; width: 60vw;
background: $not-received; background: @not-received;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: rgb(255, 231, 206); color: rgb(255, 231, 206);
&.invalid { &.invalid {
background: $received; background: @received;
} }
.top { .top {
@ -267,7 +267,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.4rem; font-size: 1.4rem;
background: $chat-bg-color; background: @chat-bg-color;
.resolve { .resolve {
display: flex; display: flex;
@ -315,7 +315,7 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 1.4rem; font-size: 1.4rem;
background: $chat-bg-color; background: @chat-bg-color;
.horn { .horn {
width: 5rem; width: 5rem;
@ -390,7 +390,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.4rem; font-size: 1.4rem;
background: $chat-bg-color; background: @chat-bg-color;
} }

394
src/pages/message/components/swtich/switches.less Normal file
View File

@ -0,0 +1,394 @@
// Color variables (appears count calculates by raw css)
@color0: #f5f5f5; // Appears 3 times
@color1: #5e91e3; // Appears 2 times
@color2: #05ffda; // Appears 2 times
@color3: #f0f0f0; // Appears 2 times
@color4: #80c780; // Appears 2 times
@color5: #77c88d; // Appears 2 times
@color6: #ffe78a; // Appears 2 times
@color7: #c89577; // Appears 2 times
@color8: #85d0e7; // Appears 2 times
@color9: #c9c377; // Appears 2 times
@color10: #4f93ce; // Appears 2 times
@color11: #f4c37d; // Appears 2 times
@color12: #c87777; // Appears 2 times
@color13: #ff6b89; // Appears 2 times
@color14: #77b0c8; // Appears 2 times
@color15: #d9534f; // Appears 2 times
@color16: #3dde75; // Appears 2 times
.vue-switcher {
display: inline-block;
position: relative;
input {
cursor: pointer;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 1;
}
div {
align-items: center;
border-radius: 30px;
cursor: pointer;
display: -ms-flex;
display: -webkit-flex;
display: flex;
height: 15px;
justify-content: flex-start;
position: relative;
transition: linear 0.2s, background-color linear 0.2s;
width: 36px;
&:after {
border-radius: 100px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
content: '';
cursor: pointer;
display: block;
height: 20px;
left: 100%;
margin-left: -18px;
position: absolute;
top: -3px;
transition: linear 0.15s, background-color linear 0.15s;
width: 20px;
}
}
}
.vue-switcher__label {
display: block;
font-size: 10px;
margin-bottom: 5px;
}
.vue-switcher--unchecked {
div {
justify-content: flex-end;
&:after {
left: 15px;
}
}
}
.vue-switcher--disabled {
div {
opacity: 0.3;
}
input {
cursor: not-allowed;
}
}
.vue-switcher--bold {
div {
height: 26px;
top: -8px;
width: 51px;
&:after {
margin-left: -24px;
top: 3px;
}
}
.vue-switcher__label {
span {
display: inline-block;
padding-bottom: 7px;
}
}
}
.vue-switcher--bold--unchecked {
div {
&:after {
left: 28px;
}
}
}
.vue-switcher-theme--default.vue-switcher-color--default {
div {
background-color: #b7b7b7;
&:after {
background-color: #9d9d9d;
}
}
}
.vue-switcher-theme--default.vue-switcher-color--default.vue-switcher--unchecked {
div {
background-color: #aaaaaa;
&:after {
background-color: #c4c4c4;
}
}
}
.vue-switcher-theme--default.vue-switcher-color--blue {
div {
background-color: @color14;
&:after {
background-color: #539bb9;
}
}
}
.vue-switcher-theme--default.vue-switcher-color--blue.vue-switcher--unchecked {
div {
background-color: #c0dae5;
&:after {
background-color: @color14;
}
}
}
.vue-switcher-theme--default.vue-switcher-color--red {
div {
background-color: @color12;
&:after {
background-color: #b95353;
}
}
}
.vue-switcher-theme--default.vue-switcher-color--red.vue-switcher--unchecked {
div {
background-color: #e5c0c0;
&:after {
background-color: @color12;
}
}
}
.vue-switcher-theme--default.vue-switcher-color--yellow {
div {
background-color: @color9;
&:after {
background-color: #bab353;
}
}
}
.vue-switcher-theme--default.vue-switcher-color--yellow.vue-switcher--unchecked {
div {
background-color: #e6e3c0;
&:after {
background-color: @color9;
}
}
}
.vue-switcher-theme--default.vue-switcher-color--orange {
div {
background-color: @color7;
&:after {
background-color: #b97953;
}
}
}
.vue-switcher-theme--default.vue-switcher-color--orange.vue-switcher--unchecked {
div {
background-color: #e5cec0;
&:after {
background-color: @color7;
}
}
}
.vue-switcher-theme--default.vue-switcher-color--green {
div {
background-color: @color5;
&:after {
background-color: #53b96e;
}
}
}
.vue-switcher-theme--default.vue-switcher-color--green.vue-switcher--unchecked {
div {
background-color: #c0e5ca;
&:after {
background-color: @color5;
}
}
}
.vue-switcher-theme--bulma.vue-switcher-color--default {
div {
background-color: #dcdcdc;
&:after {
background-color: @color0;
}
}
}
.vue-switcher-theme--bulma.vue-switcher-color--default.vue-switcher--unchecked {
div {
background-color: #e8e8e8;
&:after {
background-color: @color0;
}
}
}
.vue-switcher-theme--bulma.vue-switcher-color--primary {
div {
background-color: @color2;
&:after {
background-color: #00d1b2;
}
}
}
.vue-switcher-theme--bulma.vue-switcher-color--primary.vue-switcher--unchecked {
div {
background-color: #6bffe9;
&:after {
background-color: @color2;
}
}
}
.vue-switcher-theme--bulma.vue-switcher-color--blue {
div {
background-color: @color1;
&:after {
background-color: #3273dc;
}
}
}
.vue-switcher-theme--bulma.vue-switcher-color--blue.vue-switcher--unchecked {
div {
background-color: #b5ccf2;
&:after {
background-color: @color1;
}
}
}
.vue-switcher-theme--bulma.vue-switcher-color--red {
div {
background-color: @color13;
&:after {
background-color: #ff3860;
}
}
}
.vue-switcher-theme--bulma.vue-switcher-color--red.vue-switcher--unchecked {
div {
background-color: #ffd1da;
&:after {
background-color: @color13;
}
}
}
.vue-switcher-theme--bulma.vue-switcher-color--yellow {
div {
background-color: @color6;
&:after {
background-color: #ffdd57;
}
}
}
.vue-switcher-theme--bulma.vue-switcher-color--yellow.vue-switcher--unchecked {
div {
background-color: #fffcf0;
&:after {
background-color: @color6;
}
}
}
.vue-switcher-theme--bulma.vue-switcher-color--green {
div {
background-color: @color16;
&:after {
background-color: #22c65b;
}
}
}
.vue-switcher-theme--bulma.vue-switcher-color--green.vue-switcher--unchecked {
div {
background-color: #94edb3;
&:after {
background-color: @color16;
}
}
}
.vue-switcher-theme--bootstrap.vue-switcher-color--default {
div {
background-color: #e6e6e6;
&:after {
background-color: @color3;
}
}
}
.vue-switcher-theme--bootstrap.vue-switcher-color--default.vue-switcher--unchecked {
div {
background-color: @color0;
&:after {
background-color: @color3;
}
}
}
.vue-switcher-theme--bootstrap.vue-switcher-color--primary {
div {
background-color: @color10;
&:after {
background-color: #337ab7;
}
}
}
.vue-switcher-theme--bootstrap.vue-switcher-color--primary.vue-switcher--unchecked {
div {
background-color: #9fc4e4;
&:after {
background-color: @color10;
}
}
}
.vue-switcher-theme--bootstrap.vue-switcher-color--success {
div {
background-color: @color4;
&:after {
background-color: #5cb85c;
}
}
}
.vue-switcher-theme--bootstrap.vue-switcher-color--success.vue-switcher--unchecked {
div {
background-color: #c7e6c7;
&:after {
background-color: @color4;
}
}
}
.vue-switcher-theme--bootstrap.vue-switcher-color--info {
div {
background-color: @color8;
&:after {
background-color: #5bc0de;
}
}
}
.vue-switcher-theme--bootstrap.vue-switcher-color--info.vue-switcher--unchecked {
div {
background-color: #daf1f8;
&:after {
background-color: @color8;
}
}
}
.vue-switcher-theme--bootstrap.vue-switcher-color--warning {
div {
background-color: @color11;
&:after {
background-color: #f0ad4e;
}
}
}
.vue-switcher-theme--bootstrap.vue-switcher-color--warning.vue-switcher--unchecked {
div {
background-color: #fceedb;
&:after {
background-color: @color11;
}
}
}
.vue-switcher-theme--bootstrap.vue-switcher-color--danger {
div {
background-color: @color15;
&:after {
background-color: #c9302c;
}
}
}
.vue-switcher-theme--bootstrap.vue-switcher-color--danger.vue-switcher--unchecked {
div {
background-color: #eba5a3;
&:after {
background-color: @color15;
}
}
}

275
src/pages/message/components/swtich/switches.scss
View File

@ -1,275 +0,0 @@
/**
* Default
*/
$color-default-default: #aaa;
$color-default-green: #53b96e;
$color-default-blue: #539bb9;
$color-default-red: #b95353;
$color-default-orange: #b97953;
$color-default-yellow: #bab353;
$theme-default-colors: (
default : $color-default-default,
blue : $color-default-blue,
red : $color-default-red,
yellow : $color-default-yellow,
orange : $color-default-orange,
green : $color-default-green
);
/**
* Bulma
*/
$color-bulma-default: #f5f5f5;
$color-bulma-primary: #00d1b2;
$color-bulma-blue: #3273dc;
$color-bulma-red: #ff3860;
$color-bulma-yellow: #ffdd57;
$color-bulma-green: #22c65b;
$theme-bulma-colors: (
default : $color-bulma-default,
primary : $color-bulma-primary,
blue : $color-bulma-blue,
red : $color-bulma-red,
yellow : $color-bulma-yellow,
green : $color-bulma-green
);
/**
* Bootstrap
*/
$color-bootstrap-default: #fff;
$color-bootstrap-primary: #337ab7;
$color-bootstrap-success: #5cb85c;
$color-bootstrap-info: #5bc0de;
$color-bootstrap-warning: #f0ad4e;
$color-bootstrap-danger: #c9302c;
$theme-bootstrap-colors: (
default : $color-bootstrap-default,
primary : $color-bootstrap-primary,
success : $color-bootstrap-success,
info : $color-bootstrap-info,
warning : $color-bootstrap-warning,
danger : $color-bootstrap-danger
);
.vue-switcher {
position: relative;
display: inline-block;
&__label {
display: block;
font-size: 10px;
margin-bottom: 5px;
}
input {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
cursor: pointer;
}
div {
height: 15px;
width: 36px;
position: relative;
border-radius: 30px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
transition: linear .2s, background-color linear .2s;
&:after {
content: '';
height: 20px;
width: 20px;
border-radius: 100px;
display: block;
transition: linear .15s, background-color linear .15s;
position: absolute;
left: 100%;
margin-left: -18px;
cursor: pointer;
top: -3px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}
}
&--unchecked {
div {
justify-content: flex-end;
&:after {
left: 15px;
}
}
}
&--disabled {
div {
opacity: .3;
}
input {
cursor: not-allowed;
}
}
&--bold {
div {
top: -8px;
height: 26px;
width: 51px;
&:after {
margin-left: -24px;
top: 3px;
}
}
&--unchecked {
div {
&:after {
left: 28px;
}
}
}
.vue-switcher__label {
span {
padding-bottom: 7px;
display: inline-block;
}
}
}
&-theme--default {
@each $colorName, $color in $theme-default-colors {
&.vue-switcher-color--#{$colorName} {
div {
@if $colorName == 'default' {
background-color: lighten($color, 5%);
} @else {
background-color: lighten($color, 10%);
}
&:after {
@if $colorName == 'default' {
background-color: darken($color, 5%);
} @else {
background-color: $color
}
}
}
&.vue-switcher--unchecked {
div {
@if $colorName == 'default' {
background-color: $color;
} @else {
background-color: lighten($color, 30%);
}
&:after {
background-color: lighten($color, 10%);
}
}
}
}
}
}
&-theme--bulma {
@each $colorName, $color in $theme-bulma-colors {
&.vue-switcher-color--#{$colorName} {
div {
@if $colorName == 'default' {
background-color: darken($color, 10%);
} @else {
background-color: lighten($color, 10%);
}
&:after {
background-color: $color;
}
}
&.vue-switcher--unchecked {
div {
@if $colorName == 'default' or $colorName == 'yellow' {
background-color: darken($color, 5%);
} @else {
background-color: lighten($color, 30%);
}
&:after {
@if $colorName == 'default' {
background-color: $color;
} @else {
background-color: lighten($color, 10%);
}
}
}
}
}
}
}
&-theme--bootstrap {
@each $colorName, $color in $theme-bootstrap-colors {
&.vue-switcher-color--#{$colorName} {
div {
@if $colorName == 'default' {
background-color: darken($color, 10%);
} @else {
background-color: lighten($color, 10%);
}
&:after {
@if $colorName == 'default' {
background-color: darken($color, 6%);
} @else {
background-color: $color;
}
}
}
&.vue-switcher--unchecked {
div {
@if $colorName == 'default' {
background-color: darken($color, 4%);
} @else {
background-color: lighten($color, 30%);
}
&:after {
@if $colorName == 'default' {
background-color: darken($color, 6%);
} @else {
background-color: lighten($color, 10%);
}
}
}
}
}
}
}
}

2
src/pages/message/components/swtich/switches.vue
View File

@ -91,4 +91,4 @@ export default {
</script> </script>
<style src="./switches.scss" lang="scss"></style> <!--<style src="./switches.less" lang="less"></style>-->

2
src/pages/other/ServiceProtocol.vue
View File

@ -1614,7 +1614,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.ServiceProtocol { .ServiceProtocol {

8
src/pages/people/AddressList.vue
View File

@ -43,7 +43,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.AddressList { .AddressList {
@ -66,7 +66,7 @@ export default {
align-items: center; align-items: center;
.left { .left {
color: $second-text-color; color: @second-text-color;
img { img {
width: 10px; width: 10px;
@ -76,7 +76,7 @@ export default {
.right { .right {
border-radius: 50%; border-radius: 50%;
background: $second-text-color; background: @second-text-color;
padding: 5px; padding: 5px;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -88,7 +88,7 @@ export default {
text-align: center; text-align: center;
line-height: 6rem; line-height: 6rem;
height: 6rem; height: 6rem;
color: $second-text-color; color: @second-text-color;
} }

2
src/pages/people/FaceToFace.vue
View File

@ -23,7 +23,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.FaceToFace { .FaceToFace {

24
src/pages/people/FindAcquaintance.vue
View File

@ -200,7 +200,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.from-bottom-enter-active, .from-bottom-enter-active,
@ -229,7 +229,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
img { img {
height: 2rem; height: 2rem;
@ -242,7 +242,7 @@ export default {
.title { .title {
margin-top: 2rem; margin-top: 2rem;
color: $second-text-color; color: @second-text-color;
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
@ -253,7 +253,7 @@ export default {
align-items: center; align-items: center;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: $second-text-color; color: @second-text-color;
font-size: 1.2rem; font-size: 1.2rem;
img { img {
@ -271,7 +271,7 @@ export default {
align-items: center; align-items: center;
.left { .left {
background: $second-btn-color; background: @second-btn-color;
border-radius: 50%; border-radius: 50%;
padding: 1rem; padding: 1rem;
width: 2.4rem; width: 2.4rem;
@ -297,7 +297,7 @@ export default {
.text2 { .text2 {
font-size: 1.2rem; font-size: 1.2rem;
color: $second-text-color; color: @second-text-color;
} }
} }
} }
@ -312,7 +312,7 @@ export default {
margin-top: 2rem; margin-top: 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
color: $second-text-color; color: @second-text-color;
img { img {
margin-right: 1rem; margin-right: 1rem;
@ -368,13 +368,13 @@ export default {
} }
} }
$footer-border-color: #eaeaf1; @footer-border-color: #eaeaf1;
.footer { .footer {
width: 100%; width: 100%;
display: flex; display: flex;
height: 4rem; height: 4rem;
border-top: 1px solid $footer-border-color; border-top: 1px solid @footer-border-color;
font-size: 1.4rem; font-size: 1.4rem;
div { div {
@ -383,7 +383,7 @@ export default {
justify-content: center; justify-content: center;
width: 49%; width: 49%;
text-align: center; text-align: center;
border-right: 1px solid $footer-border-color; border-right: 1px solid @footer-border-color;
opacity: .5; opacity: .5;
&:nth-last-child(1) { &:nth-last-child(1) {
@ -441,7 +441,7 @@ export default {
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
position: absolute; position: absolute;
background: $second-btn-color-tran; background: @second-btn-color-tran;
padding: .4rem; padding: .4rem;
width: 1rem; width: 1rem;
border-radius: 50%; border-radius: 50%;
@ -457,7 +457,7 @@ export default {
margin-top: 2rem; margin-top: 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
color: $second-text-color; color: @second-text-color;
img { img {
margin-right: 1rem; margin-right: 1rem;

4
src/pages/people/Scan.vue
View File

@ -37,7 +37,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../assets/scss/index"; @import "../../assets/scss/index";
.Scan { .Scan {
@ -71,7 +71,7 @@ export default {
img { img {
border-radius: 50%; border-radius: 50%;
background: $second-btn-color-tran; background: @second-btn-color-tran;
padding: 1.6rem; padding: 1.6rem;
height: 2.4rem; height: 2.4rem;
margin-bottom: 1rem; margin-bottom: 1rem;

16
src/pages/people/components/People.vue
View File

@ -70,7 +70,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
@import "../../../assets/scss/index"; @import "../../../assets/scss/index";
.scale-enter-active, .scale-enter-active,
@ -103,7 +103,7 @@ export default {
} }
.add { .add {
background: $second-btn-color-tran; background: @second-btn-color-tran;
margin-right: 1.5rem; margin-right: 1.5rem;
padding: 1.5rem; padding: 1.5rem;
width: 1.8rem; width: 1.8rem;
@ -124,7 +124,7 @@ export default {
} }
.detail { .detail {
color: $second-text-color; color: @second-text-color;
font-size: 1.2rem; font-size: 1.2rem;
margin-top: 4px; margin-top: 4px;
} }
@ -145,7 +145,7 @@ export default {
} }
&.red { &.red {
background: $primary-btn-color; background: @primary-btn-color;
} }
} }
@ -163,7 +163,7 @@ export default {
bottom: -100%; bottom: -100%;
right: 1rem; right: 1rem;
border-radius: .8rem; border-radius: .8rem;
background: $second-btn-color; background: @second-btn-color;
.item { .item {
font-size: 1.4rem; font-size: 1.4rem;
@ -171,11 +171,11 @@ export default {
display: flex; display: flex;
height: 4rem; height: 4rem;
align-items: center; align-items: center;
border-bottom: 1px solid $line-color; border-bottom: 1px solid @line-color;
&:nth-last-child(1) { &:nth-last-child(1) {
border-bottom: none; border-bottom: none;
color: $primary-btn-color; color: @primary-btn-color;
} }
img { img {
@ -188,7 +188,7 @@ export default {
width: 0; width: 0;
height: 0; height: 0;
border: .7rem solid transparent; border: .7rem solid transparent;
border-bottom: .7rem solid $second-btn-color; border-bottom: .7rem solid @second-btn-color;
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: -1.4rem; top: -1.4rem;

2
src/router/index.js
View File

@ -42,6 +42,7 @@ import PasswordLogin from "../pages/login/PasswordLogin";
import VerificationCode from "../pages/login/VerificationCode"; import VerificationCode from "../pages/login/VerificationCode";
import RetrievePassword from "../pages/login/RetrievePassword"; import RetrievePassword from "../pages/login/RetrievePassword";
import Help from "../pages/login/Help"; import Help from "../pages/login/Help";
import Attention2 from "../pages/home/Attention2";
const routes = [ const routes = [
// {path: '', component: Music}, // {path: '', component: Music},
@ -49,6 +50,7 @@ const routes = [
{path: '/', component: Index2}, {path: '/', component: Index2},
{path: '/home', component: Index}, {path: '/home', component: Index},
{path: '/attention', component: Attention}, {path: '/attention', component: Attention},
// {path: '/attention', component: Attention2},
{path: '/publish', component: Publish}, {path: '/publish', component: Publish},
{path: '/test', component: Test}, {path: '/test', component: Test},
{path: '/message', component: Message}, {path: '/message', component: Message},