将sass换为less，受不了
This commit is contained in:
zyronon
parent
3909dc2bda
commit
b6571b96d5
@ -28,9 +28,9 @@
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"mobile-select": "^1.1.2",
|
||||
"node-sass": "^4.9.3",
|
||||
"sass-loader": "^7.1.0"
|
||||
"less": "^4.1.1",
|
||||
"less-loader": "^7.0.0",
|
||||
"mobile-select": "^1.1.2"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": false,
|
||||
|
||||
@ -87,7 +87,7 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="less">
|
||||
|
||||
.base-slide-item {
|
||||
min-width: 100vw;
|
||||
@ -136,5 +136,4 @@ export default {
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
14
src/assets/scss/color.less
Normal file
14
src/assets/scss/color.less
Normal 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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
&.no-active {
|
||||
&:active {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,11 +35,11 @@
|
||||
}
|
||||
|
||||
&.border {
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $active-main-bg;
|
||||
background: @active-main-bg;
|
||||
}
|
||||
|
||||
.left {
|
||||
@ -58,7 +58,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
margin-left: .5rem;
|
||||
@ -77,21 +77,21 @@
|
||||
font-size: 1.4rem;
|
||||
|
||||
&.primary {
|
||||
background: $primary-btn-color;
|
||||
background: @primary-btn-color;
|
||||
|
||||
&:active {
|
||||
background: $disable-primary-btn-color;
|
||||
background: @disable-primary-btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-active {
|
||||
&:active {
|
||||
&.primary {
|
||||
background: $primary-btn-color;
|
||||
background: @primary-btn-color;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
}
|
||||
|
||||
&.white {
|
||||
@ -113,10 +113,10 @@
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
|
||||
&:active {
|
||||
background: $second-btn-color-tran;
|
||||
background: @second-btn-color-tran;
|
||||
}
|
||||
}
|
||||
|
||||
@ -134,7 +134,7 @@ p {
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
background: $line-color;
|
||||
background: @line-color;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@ html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//background: #2e3244;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
font-size: 62.5%;
|
||||
//letter-spacing: .11rem;
|
||||
margin: 0;
|
||||
140
src/assets/scss/utils.less
Normal file
140
src/assets/scss/utils.less
Normal 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));
|
||||
}
|
||||
|
||||
@ -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
2
src/assets/scss/variables.less
Normal file
@ -0,0 +1,2 @@
|
||||
@footer-height: 6rem;
|
||||
@header-height: 6rem;
|
||||
@ -1,2 +0,0 @@
|
||||
$footer-height: 6rem;
|
||||
$header-height: 6rem;
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
img {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../assets/scss/index";
|
||||
|
||||
.button {
|
||||
@ -85,21 +85,21 @@ export default {
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: $primary-btn-color;
|
||||
background: @primary-btn-color;
|
||||
|
||||
&:active {
|
||||
background: $disable-primary-btn-color;
|
||||
background: @disable-primary-btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-active {
|
||||
&:active {
|
||||
&.primary {
|
||||
background: $primary-btn-color;
|
||||
background: @primary-btn-color;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
}
|
||||
|
||||
&.white {
|
||||
@ -122,10 +122,10 @@ export default {
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
|
||||
&:active {
|
||||
background: $second-btn-color-tran;
|
||||
background: @second-btn-color-tran;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -53,7 +53,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
<style scoped lang="less">
|
||||
@import "../assets/scss/index";
|
||||
|
||||
#BaseHeader {
|
||||
@ -67,7 +67,7 @@ export default {
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../assets/scss/index";
|
||||
|
||||
.Check {
|
||||
|
||||
@ -61,7 +61,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.comment {
|
||||
position: fixed;
|
||||
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
|
||||
.footer {
|
||||
font-size: 1.5rem;
|
||||
@ -105,10 +105,10 @@ export default {
|
||||
}
|
||||
|
||||
.add-ctn {
|
||||
$height: 2.7rem;
|
||||
$width: 4rem;
|
||||
height: $height;
|
||||
width: $width;
|
||||
@height: 2.7rem;
|
||||
@width: 4rem;
|
||||
height: @height;
|
||||
width: @width;
|
||||
background: linear-gradient(to right, #59dcdf, #ff5f75);
|
||||
border-radius: .5rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -95,7 +95,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../assets/scss/index";
|
||||
|
||||
.indicator-ctn {
|
||||
@ -106,7 +106,7 @@ export default {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
|
||||
@ -16,7 +16,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../assets/scss/index";
|
||||
|
||||
.Loading {
|
||||
@ -52,7 +52,7 @@ export default {
|
||||
}
|
||||
|
||||
.red {
|
||||
background: $primary-btn-color;
|
||||
background: @primary-btn-color;
|
||||
animation: anim-red .4s ease-in-out 0s infinite alternate;
|
||||
}
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
|
||||
.Mask {
|
||||
z-index: 3;
|
||||
|
||||
@ -15,7 +15,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../assets/scss/index";
|
||||
|
||||
.NoMore {
|
||||
@ -24,6 +24,6 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -121,7 +121,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
.me {
|
||||
color: white;
|
||||
|
||||
|
||||
@ -69,7 +69,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
.posters {
|
||||
display: grid;
|
||||
grid-template-columns: 33.33vw 33.33vw 33.33vw;
|
||||
|
||||
@ -60,7 +60,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../assets/scss/color";
|
||||
|
||||
.search-ctn {
|
||||
@ -100,7 +100,7 @@ export default {
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.share {
|
||||
position: fixed;
|
||||
/*top: 200px;*/
|
||||
|
||||
@ -298,7 +298,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../assets/scss/color";
|
||||
|
||||
.fade-enter-active,
|
||||
@ -573,7 +573,7 @@ export default {
|
||||
|
||||
.right {
|
||||
margin: 0 10px;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
.name {
|
||||
margin-right: 10px;
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
<style scoped lang="less">
|
||||
.Music {
|
||||
header {
|
||||
background: #454b66;
|
||||
|
||||
@ -67,7 +67,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.ConfirmDialog {
|
||||
@ -105,7 +105,7 @@ export default {
|
||||
font-size: 1.3rem;
|
||||
|
||||
&.gray {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -131,7 +131,7 @@ export default {
|
||||
border-right: 1px solid whitesmoke;
|
||||
|
||||
&.gray {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.FadeDialog {
|
||||
|
||||
@ -156,7 +156,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.FromBottomDialog {
|
||||
@ -171,7 +171,7 @@ export default {
|
||||
border-radius: .5rem .5rem 0 0;
|
||||
|
||||
&.dark {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
}
|
||||
|
||||
&.light {
|
||||
@ -198,10 +198,10 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
&.dark {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.content {
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -53,7 +53,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.NoticeDialog {
|
||||
@ -91,7 +91,7 @@ export default {
|
||||
font-size: 1.3rem;
|
||||
|
||||
&.gray{
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
.SelectDialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
|
||||
.SimpleConfirmDialog {
|
||||
z-index: 10;
|
||||
|
||||
@ -397,7 +397,7 @@ export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
#home-index {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@ -553,7 +553,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
|
||||
.pause-enter-active {
|
||||
transition: all .3s ease;
|
||||
|
||||
@ -271,7 +271,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
#base-slide-wrapper {
|
||||
|
||||
@ -10,7 +10,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
.base-slide-item {
|
||||
min-width: 100vw;
|
||||
//min-height: 100vh;
|
||||
|
||||
@ -413,7 +413,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
#base-slide-wrapper {
|
||||
@ -506,7 +506,7 @@ export default {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
|
||||
@ -321,7 +321,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
#base-slide-wrapper {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import mitt from 'mitt'
|
||||
import './assets/scss/index.scss'
|
||||
import './assets/scss/index.less'
|
||||
// import './mock'// 导入 mock 数据处理
|
||||
import api from './api'
|
||||
import router from "./router";
|
||||
|
||||
@ -4,173 +4,175 @@
|
||||
<span @click="$nav('/country-choose')">双流</span>
|
||||
<div class="arrow"></div>
|
||||
</header>
|
||||
<div class="scroll-wrapper"
|
||||
ref="scroll-wrapper"
|
||||
<div class="scroller"
|
||||
ref="scroller"
|
||||
@touchstart="start"
|
||||
@touchmove="move"
|
||||
@touchend="end"
|
||||
@scroll="scroll"
|
||||
>
|
||||
<div class="header" ref="header">
|
||||
<Loading :isFullScreen="false"></Loading>
|
||||
</div>
|
||||
<div class="ad" v-if="false">
|
||||
<div class="title">超值卖场 次日达</div>
|
||||
<div class="good-ctn">
|
||||
<div ref="wrapper" class="wrapper">
|
||||
<div class="header" ref="header">
|
||||
<Loading :isFullScreen="false"></Loading>
|
||||
</div>
|
||||
<div class="ad" v-if="false">
|
||||
<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-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 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="goods">
|
||||
<div class="good">
|
||||
<div class="notice">
|
||||
<div class="ad-name">低价疯抢</div>
|
||||
<div class="ad-desc">统一方便面</div>
|
||||
<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>
|
||||
<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 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>
|
||||
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
|
||||
</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 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>
|
||||
<Loading :isFullScreen="false"></Loading>
|
||||
</div>
|
||||
</div>
|
||||
<Footer v-bind:init-tab="2" style="position: fixed;"/>
|
||||
@ -267,26 +269,28 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
start(e) {
|
||||
let wrapper = this.$refs["scroll-wrapper"]
|
||||
let wrapper = this.$refs["wrapper"]
|
||||
wrapper.style.transition = `none`
|
||||
this.startLocationY = e.touches[0].pageY
|
||||
},
|
||||
move(e) {
|
||||
let wrapper = this.$refs["scroll-wrapper"]
|
||||
let scroller = this.$refs["scroller"]
|
||||
let wrapper = this.$refs["wrapper"]
|
||||
let header = this.$refs["header"]
|
||||
this.isTop = wrapper.scrollTop === 0
|
||||
console.log('scrollTop', wrapper.scrollTop)
|
||||
this.isTop = scroller.scrollTop === 0
|
||||
// console.log('scrollTop', scroller.scrollTop)
|
||||
let touchMoveDistance = e.touches[0].pageY - this.startLocationY
|
||||
console.log('touchMoveDistance', touchMoveDistance)
|
||||
|
||||
//
|
||||
let headerHeight = 80
|
||||
if (this.isTop) {
|
||||
// this.$setCss(wrapper,'tr')
|
||||
if (touchMoveDistance > 0) {
|
||||
let transformY = this.$getTransform(header)
|
||||
header.style.transform = `translate3d(0,${touchMoveDistance > 40 ? 40 : touchMoveDistance}px,0)`
|
||||
wrapper.style.transform = `translate3d(0,${touchMoveDistance > 40 ? 40 : touchMoveDistance}px,0)`
|
||||
}else {
|
||||
wrapper.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 > headerHeight ? headerHeight : touchMoveDistance}px,0)`
|
||||
} else {
|
||||
wrapper.style.transform = `translate3d(0,${touchMoveDistance < -headerHeight ? -headerHeight : touchMoveDistance}px,0)`
|
||||
}
|
||||
} else {
|
||||
// wrapper.style.height = '100vh'
|
||||
@ -295,7 +299,7 @@ export default {
|
||||
console.log('isTop', this.isTop)
|
||||
},
|
||||
end() {
|
||||
let wrapper = this.$refs["scroll-wrapper"]
|
||||
let wrapper = this.$refs["wrapper"]
|
||||
// wrapper.style.transition = `all .3s`
|
||||
// wrapper.style.transform = `translate3d(0,0,0)`
|
||||
},
|
||||
@ -308,15 +312,15 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
#attention {
|
||||
/*background: rgb(22，24，34);*/
|
||||
/*background: #161822;*/
|
||||
//抖音原色，感觉很暗
|
||||
$douyin-bg: #2e3244;
|
||||
background: $douyin-bg;
|
||||
@douyin-bg: #2e3244;
|
||||
background: @douyin-bg;
|
||||
color: #b8b9c1;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@ -325,17 +329,22 @@ export default {
|
||||
top: 0;
|
||||
//overflow: auto;
|
||||
|
||||
.scroll-wrapper {
|
||||
.scroller {
|
||||
height: calc(100vh - 10rem);
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
background: black;
|
||||
|
||||
.header {
|
||||
> .wrapper {
|
||||
position: absolute;
|
||||
top: -4rem;
|
||||
top: -8rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
> .header {
|
||||
height: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -346,7 +355,7 @@ export default {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
$arrow-width: 5px;
|
||||
@arrow-width: 5px;
|
||||
|
||||
.arrow {
|
||||
position: relative;
|
||||
@ -354,10 +363,10 @@ export default {
|
||||
left: 5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: $arrow-width solid white;
|
||||
border-right: $arrow-width solid transparent;
|
||||
border-bottom: $arrow-width solid transparent;
|
||||
border-left: $arrow-width solid transparent;
|
||||
border-top: @arrow-width solid white;
|
||||
border-right: @arrow-width solid transparent;
|
||||
border-bottom: @arrow-width solid transparent;
|
||||
border-left: @arrow-width solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -519,13 +528,13 @@ export default {
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
color: white;
|
||||
background: $primary-btn-color;
|
||||
background: @primary-btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
.location {
|
||||
padding: 8px 10px 10px 10px;
|
||||
background: $douyin-bg;
|
||||
background: @douyin-bg;
|
||||
|
||||
.top, .bottom {
|
||||
font-size: 1.4rem;
|
||||
@ -558,7 +567,7 @@ export default {
|
||||
|
||||
.ranking-list {
|
||||
padding: 2rem 1rem;
|
||||
background: $douyin-bg;
|
||||
background: @douyin-bg;
|
||||
|
||||
.desc {
|
||||
.top {
|
||||
@ -582,7 +591,7 @@ export default {
|
||||
font-size: 1.2rem;
|
||||
|
||||
.ad {
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
display: flex;
|
||||
margin-top: 1rem;
|
||||
|
||||
@ -601,7 +610,7 @@ export default {
|
||||
justify-content: center;
|
||||
|
||||
.rank {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
73
src/pages/home/Attention2.vue
Normal file
73
src/pages/home/Attention2.vue
Normal 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>
|
||||
@ -587,7 +587,7 @@ export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
#home-index {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@ -295,7 +295,7 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
#home-index {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@ -575,7 +575,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
#home-index {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@ -84,7 +84,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.Publish {
|
||||
@ -100,7 +100,7 @@ export default {
|
||||
.footer {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
.base-slide-item {
|
||||
display: flex;
|
||||
|
||||
@ -17,7 +17,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.Test {
|
||||
|
||||
191
src/pages/home/testt.vue
Normal file
191
src/pages/home/testt.vue
Normal 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>
|
||||
@ -19,14 +19,14 @@
|
||||
|
||||
.sub-title {
|
||||
font-size: 1.2rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.3rem;
|
||||
color: $primary-btn-color;
|
||||
color: @primary-btn-color;
|
||||
}
|
||||
|
||||
.button {
|
||||
|
||||
@ -27,7 +27,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.Help {
|
||||
|
||||
@ -94,7 +94,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.login {
|
||||
@ -130,7 +130,7 @@ export default {
|
||||
|
||||
.sub-title {
|
||||
font-size: 1.2rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -115,7 +115,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
@import "Base.scss";
|
||||
|
||||
|
||||
@ -84,7 +84,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
@import "Base.scss";
|
||||
|
||||
|
||||
@ -128,7 +128,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
@import "Base.scss";
|
||||
|
||||
|
||||
@ -90,7 +90,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
@import "Base.scss";
|
||||
|
||||
|
||||
@ -115,7 +115,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.input-number {
|
||||
@ -189,7 +189,7 @@ export default {
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.scale-enter-active,
|
||||
|
||||
@ -2432,7 +2432,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.countryChoose {
|
||||
@ -2464,7 +2464,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
//transition: all .3s;
|
||||
font-size: 1rem;
|
||||
padding: .1rem;
|
||||
@ -2475,7 +2475,7 @@ export default {
|
||||
width: 0;
|
||||
height: 0;
|
||||
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 {
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
|
||||
.cities {
|
||||
.city {
|
||||
@ -2507,7 +2507,7 @@ export default {
|
||||
border-radius: .2rem;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
background: $second-btn-color-tran;
|
||||
background: @second-btn-color-tran;
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
text-align: center;
|
||||
@ -2519,7 +2519,7 @@ export default {
|
||||
//padding-right: 2.5rem;
|
||||
|
||||
.row {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -301,7 +301,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.fade-enter-active,
|
||||
@ -316,7 +316,7 @@ export default {
|
||||
}
|
||||
|
||||
.Me {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@ -370,7 +370,7 @@ export default {
|
||||
}
|
||||
|
||||
.detail {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
padding: 0 20px;
|
||||
|
||||
.head {
|
||||
@ -397,7 +397,7 @@ export default {
|
||||
justify-content: center;
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
margin-left: 5px;
|
||||
padding: 0 10px;
|
||||
height: 30px;
|
||||
@ -422,9 +422,9 @@ export default {
|
||||
transform: translateY(-20px);
|
||||
|
||||
.number {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -466,7 +466,7 @@ export default {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
color: white;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
@ -477,7 +477,7 @@ export default {
|
||||
|
||||
.li {
|
||||
box-sizing: border-box;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
list-style: none;
|
||||
@ -506,7 +506,7 @@ export default {
|
||||
font-size: 1.2rem;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.title {
|
||||
padding: 2rem 0 1rem 2rem;
|
||||
@ -528,7 +528,7 @@ export default {
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
background: $second-btn-color-tran;
|
||||
background: @second-btn-color-tran;
|
||||
padding: .6rem;
|
||||
height: 1.6rem;
|
||||
margin-bottom: 15px;
|
||||
@ -543,12 +543,12 @@ export default {
|
||||
width: 70vw;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.button {
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 4rem);
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
margin: 2rem;
|
||||
height: 4.5rem;
|
||||
border-radius: 3px;
|
||||
|
||||
@ -755,7 +755,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.fade1-enter-active,
|
||||
@ -770,7 +770,7 @@ export default {
|
||||
}
|
||||
|
||||
.Me {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
@ -790,7 +790,7 @@ export default {
|
||||
.notice {
|
||||
font-size: 1.2rem;
|
||||
height: 4rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -805,7 +805,7 @@ export default {
|
||||
padding: .7rem;
|
||||
|
||||
.video {
|
||||
background: $active-main-bg;
|
||||
background: @active-main-bg;
|
||||
border-radius: .5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: .7rem;
|
||||
@ -830,7 +830,7 @@ export default {
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -871,7 +871,7 @@ export default {
|
||||
}
|
||||
|
||||
.audio {
|
||||
background: $active-main-bg;
|
||||
background: @active-main-bg;
|
||||
border-radius: .5rem;
|
||||
padding: 1rem;
|
||||
|
||||
@ -895,7 +895,7 @@ export default {
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -917,7 +917,7 @@ export default {
|
||||
|
||||
.title {
|
||||
margin-top: .5rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -945,10 +945,10 @@ export default {
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
img {
|
||||
background: $main-bg !important;
|
||||
background: @main-bg !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -991,7 +991,7 @@ export default {
|
||||
}
|
||||
|
||||
.detail {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
padding: 0 2rem;
|
||||
|
||||
.head {
|
||||
@ -1022,7 +1022,7 @@ export default {
|
||||
justify-content: center;
|
||||
float: left;
|
||||
border-radius: .2rem;
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
margin-left: .5rem;
|
||||
padding: 0 1rem;
|
||||
height: 3rem;
|
||||
@ -1052,7 +1052,7 @@ export default {
|
||||
transform: translateY(-2rem);
|
||||
|
||||
.signature {
|
||||
//color: $second-text-color;
|
||||
//color: @second-text-color;
|
||||
color: white;
|
||||
font-size: 1.3rem;
|
||||
display: flex;
|
||||
@ -1066,13 +1066,13 @@ export default {
|
||||
}
|
||||
|
||||
.more {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
padding: .2rem .5rem;
|
||||
border-radius: .2rem;
|
||||
background: $second-btn-color-tran;
|
||||
background: @second-btn-color-tran;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1086,9 +1086,9 @@ export default {
|
||||
}
|
||||
|
||||
.number {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -1129,7 +1129,7 @@ export default {
|
||||
img {
|
||||
margin-right: .8rem;
|
||||
border-radius: .4rem;
|
||||
background: $second-btn-color-tran;
|
||||
background: @second-btn-color-tran;
|
||||
padding: .8rem;
|
||||
height: 2.2rem;
|
||||
}
|
||||
@ -1145,7 +1145,7 @@ export default {
|
||||
}
|
||||
|
||||
.bottom {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
@ -1164,7 +1164,7 @@ export default {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
color: white;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
@ -1175,7 +1175,7 @@ export default {
|
||||
|
||||
.li {
|
||||
box-sizing: border-box;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
list-style: none;
|
||||
@ -1204,7 +1204,7 @@ export default {
|
||||
font-size: 1.2rem;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.title {
|
||||
padding: 2rem 0 1rem 2rem;
|
||||
@ -1226,7 +1226,7 @@ export default {
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
background: $second-btn-color-tran;
|
||||
background: @second-btn-color-tran;
|
||||
padding: .6rem;
|
||||
height: 1.6rem;
|
||||
margin-bottom: 15px;
|
||||
@ -1241,12 +1241,12 @@ export default {
|
||||
width: 70vw;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.button {
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 4rem);
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
margin: 2rem;
|
||||
height: 4.5rem;
|
||||
border-radius: 3px;
|
||||
|
||||
@ -734,7 +734,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.fade1-enter-active,
|
||||
@ -749,7 +749,7 @@ export default {
|
||||
}
|
||||
|
||||
.Me {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
@ -759,7 +759,7 @@ export default {
|
||||
.notice {
|
||||
font-size: 1.2rem;
|
||||
height: 4rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -774,7 +774,7 @@ export default {
|
||||
padding: .7rem;
|
||||
|
||||
.video {
|
||||
background: $active-main-bg;
|
||||
background: @active-main-bg;
|
||||
border-radius: .5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: .7rem;
|
||||
@ -799,7 +799,7 @@ export default {
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -840,7 +840,7 @@ export default {
|
||||
}
|
||||
|
||||
.audio {
|
||||
background: $active-main-bg;
|
||||
background: @active-main-bg;
|
||||
border-radius: .5rem;
|
||||
padding: 1rem;
|
||||
|
||||
@ -864,7 +864,7 @@ export default {
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -886,7 +886,7 @@ export default {
|
||||
|
||||
.title {
|
||||
margin-top: .5rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -914,10 +914,10 @@ export default {
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
img {
|
||||
background: $main-bg !important;
|
||||
background: @main-bg !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -962,7 +962,7 @@ export default {
|
||||
}
|
||||
|
||||
.detail {
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
padding: 0 2rem;
|
||||
|
||||
.head {
|
||||
@ -984,7 +984,7 @@ export default {
|
||||
.heat {
|
||||
margin-top: 1rem;
|
||||
width: calc(100% - 12rem);
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -1015,9 +1015,9 @@ export default {
|
||||
transform: translateY(-2rem);
|
||||
|
||||
.number {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -1030,7 +1030,7 @@ export default {
|
||||
}
|
||||
|
||||
.signature {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: .5rem;
|
||||
@ -1042,13 +1042,13 @@ export default {
|
||||
}
|
||||
|
||||
.more {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
padding: .2rem .5rem;
|
||||
border-radius: .2rem;
|
||||
background: $second-btn-color-tran;
|
||||
background: @second-btn-color-tran;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1072,7 +1072,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: .2rem;
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
height: 3rem;
|
||||
color: white;
|
||||
}
|
||||
@ -1091,7 +1091,7 @@ export default {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
color: white;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
@ -1102,7 +1102,7 @@ export default {
|
||||
|
||||
.li {
|
||||
box-sizing: border-box;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
list-style: none;
|
||||
@ -1131,7 +1131,7 @@ export default {
|
||||
font-size: 1.2rem;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.title {
|
||||
padding: 2rem 0 1rem 2rem;
|
||||
@ -1153,7 +1153,7 @@ export default {
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
background: $second-btn-color-tran;
|
||||
background: @second-btn-color-tran;
|
||||
padding: .6rem;
|
||||
height: 1.6rem;
|
||||
margin-bottom: 15px;
|
||||
@ -1168,12 +1168,12 @@ export default {
|
||||
width: 70vw;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.button {
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 4rem);
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
margin: 2rem;
|
||||
height: 4.5rem;
|
||||
border-radius: 3px;
|
||||
|
||||
@ -45,7 +45,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
#MyCard {
|
||||
@ -59,7 +59,7 @@ export default {
|
||||
|
||||
|
||||
.content {
|
||||
padding-top: $header-height;
|
||||
padding-top: @header-height;
|
||||
|
||||
.card {
|
||||
margin: 3rem;
|
||||
@ -128,5 +128,4 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
#MyCollect {
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
|
||||
@ -370,7 +370,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
|
||||
@ -405,8 +405,8 @@ export default {
|
||||
}
|
||||
|
||||
.share-to-friend {
|
||||
color: $second-text-color;
|
||||
height: $footer-height;
|
||||
color: @second-text-color;
|
||||
height: @footer-height;
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@ -427,8 +427,8 @@ export default {
|
||||
}
|
||||
|
||||
.permission-setting {
|
||||
color: $second-text-color;
|
||||
height: $footer-height;
|
||||
color: @second-text-color;
|
||||
height: @footer-height;
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@ -516,7 +516,7 @@ export default {
|
||||
font-size: 1.4rem;
|
||||
color: white;
|
||||
padding: 5px 20px;
|
||||
background: $primary-btn-color;
|
||||
background: @primary-btn-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
@ -559,7 +559,7 @@ export default {
|
||||
font-size: 1.4rem;
|
||||
color: white;
|
||||
padding: 5px 20px;
|
||||
background: $primary-btn-color;
|
||||
background: @primary-btn-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,7 +63,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.lookHistory {
|
||||
@ -94,7 +94,7 @@ export default {
|
||||
.subtitle {
|
||||
font-size: 1.3rem;
|
||||
margin-top: 1rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -85,7 +85,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../../assets/scss/index";
|
||||
|
||||
.DetailSetting {
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
font-size: 1.4rem;
|
||||
|
||||
.content {
|
||||
padding-top: $header-height;
|
||||
padding-top: @header-height;
|
||||
}
|
||||
|
||||
.footer {
|
||||
@ -122,7 +122,7 @@ export default {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 1.6rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
width: 1.5rem;
|
||||
|
||||
@ -43,7 +43,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../../assets/scss/index";
|
||||
|
||||
.index {
|
||||
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../../assets/scss/index";
|
||||
|
||||
.TriggerTime {
|
||||
|
||||
@ -197,7 +197,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.Setting {
|
||||
@ -214,13 +214,13 @@ export default {
|
||||
padding-top: 6rem;
|
||||
|
||||
.title {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
font-size: 1.3rem;
|
||||
margin: 2rem 0 0 2rem;
|
||||
}
|
||||
|
||||
.version {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
font-size: 1.3rem;
|
||||
margin: 4rem;
|
||||
text-align: center;
|
||||
@ -229,7 +229,7 @@ export default {
|
||||
.line {
|
||||
width: calc(100% - 3rem);
|
||||
margin-left: 1.5rem;
|
||||
background: $line-color;
|
||||
background: @line-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -161,7 +161,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.school {
|
||||
@ -179,11 +179,11 @@ export default {
|
||||
}
|
||||
|
||||
.save-yes {
|
||||
color: $primary-btn-color;
|
||||
color: @primary-btn-color;
|
||||
}
|
||||
|
||||
.save-no {
|
||||
color: $disable-primary-btn-color;
|
||||
color: @disable-primary-btn-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.choose-location {
|
||||
@ -103,13 +103,13 @@ export default {
|
||||
height: 5rem;
|
||||
font-size: 1.4rem;
|
||||
transition: all .1s;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
margin-left: 1rem;
|
||||
@ -118,8 +118,8 @@ export default {
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $active-main-bg;
|
||||
color: $second-text-color;
|
||||
background: @active-main-bg;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.choose-school {
|
||||
@ -75,11 +75,11 @@ export default {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: all .1s;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
&:active {
|
||||
background: $active-main-bg;
|
||||
color: $second-text-color;
|
||||
background: @active-main-bg;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1205,7 +1205,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.choose-location {
|
||||
@ -1226,7 +1226,7 @@ export default {
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
padding: 1rem 1.5rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
width: 1rem;
|
||||
@ -1243,13 +1243,13 @@ export default {
|
||||
height: 5rem;
|
||||
font-size: 1.4rem;
|
||||
transition: all .1s;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
margin-left: 1rem;
|
||||
@ -1258,8 +1258,8 @@ export default {
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $active-main-bg;
|
||||
color: $second-text-color;
|
||||
background: @active-main-bg;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.choose-location {
|
||||
@ -72,13 +72,13 @@ export default {
|
||||
height: 5rem;
|
||||
font-size: 1.4rem;
|
||||
transition: all .1s;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
margin-left: 1rem;
|
||||
@ -87,8 +87,8 @@ export default {
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $active-main-bg;
|
||||
color: $second-text-color;
|
||||
background: @active-main-bg;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -96,7 +96,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.choose-school {
|
||||
@ -134,11 +134,11 @@ export default {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: all .1s;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
|
||||
&:active {
|
||||
background: $active-main-bg;
|
||||
color: $second-text-color;
|
||||
background: @active-main-bg;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -151,7 +151,7 @@ export default {
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
@ -165,7 +165,7 @@ export default {
|
||||
.btn {
|
||||
margin-top: 15rem;
|
||||
display: inline-block;
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
padding: 1.5rem 4rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@ -57,7 +57,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.declare-school {
|
||||
@ -89,7 +89,7 @@ export default {
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@ -109,7 +109,7 @@ export default {
|
||||
padding: 1.2rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
margin-left: 5px;
|
||||
@ -122,7 +122,7 @@ export default {
|
||||
|
||||
.notice {
|
||||
margin-top: 2rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@ -132,7 +132,7 @@ export default {
|
||||
right: 2rem;
|
||||
color: white;
|
||||
font-size: 1.6rem;
|
||||
background: $primary-btn-color;
|
||||
background: @primary-btn-color;
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
border-radius: 2px;
|
||||
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.DisplayType {
|
||||
|
||||
@ -146,7 +146,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.edit {
|
||||
@ -165,7 +165,7 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.sub {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -179,7 +179,7 @@ export default {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 3rem 0;
|
||||
$avatar-width: 7rem;
|
||||
@avatar-width: 7rem;
|
||||
|
||||
.avatar-ctn {
|
||||
position: relative;
|
||||
@ -188,14 +188,14 @@ export default {
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
width: $avatar-width;
|
||||
height: $avatar-width;
|
||||
width: @avatar-width;
|
||||
height: @avatar-width;
|
||||
|
||||
.avatar {
|
||||
opacity: .5;
|
||||
position: absolute;
|
||||
width: $avatar-width;
|
||||
height: $avatar-width;
|
||||
width: @avatar-width;
|
||||
height: @avatar-width;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
@ -103,7 +103,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.edit-item {
|
||||
@ -114,11 +114,11 @@ export default {
|
||||
top: 0;
|
||||
|
||||
.save-yes {
|
||||
color: $primary-btn-color;
|
||||
color: @primary-btn-color;
|
||||
}
|
||||
|
||||
.save-no {
|
||||
color: $disable-primary-btn-color;
|
||||
color: @disable-primary-btn-color;
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -127,12 +127,12 @@ export default {
|
||||
|
||||
.notice, .num {
|
||||
font-size: 1.2rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
.input-ctn {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -146,7 +146,7 @@ export default {
|
||||
background: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -160,7 +160,7 @@ export default {
|
||||
|
||||
.textarea-ctn {
|
||||
width: 100%;
|
||||
background: $active-main-bg;
|
||||
background: @active-main-bg;
|
||||
padding: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
margin-top: 1rem;
|
||||
@ -176,7 +176,7 @@ export default {
|
||||
color: white;
|
||||
|
||||
&::placeholder {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
#attention {
|
||||
/*background: rgb(22，24，34);*/
|
||||
/*background: #161822;*/
|
||||
@ -114,7 +114,7 @@ export default {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
$arrow-width: 5px;
|
||||
@arrow-width: 5px;
|
||||
|
||||
.arrow {
|
||||
position: relative;
|
||||
@ -122,10 +122,10 @@ export default {
|
||||
left: 5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: $arrow-width solid white;
|
||||
border-right: $arrow-width solid transparent;
|
||||
border-bottom: $arrow-width solid transparent;
|
||||
border-left: $arrow-width solid transparent;
|
||||
border-top: @arrow-width solid white;
|
||||
border-right: @arrow-width solid transparent;
|
||||
border-bottom: @arrow-width solid transparent;
|
||||
border-left: @arrow-width solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -386,7 +386,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.Chat {
|
||||
@ -400,16 +400,16 @@ export default {
|
||||
|
||||
.header {
|
||||
z-index: 2;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: $header-height;
|
||||
height: @header-height;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
|
||||
img {
|
||||
height: 2rem;
|
||||
@ -429,7 +429,7 @@ export default {
|
||||
padding: 1px 6px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -445,22 +445,22 @@ export default {
|
||||
}
|
||||
|
||||
.footer {
|
||||
$chat-bg-color: rgb(105, 143, 244);
|
||||
$typing-bg-color: whitesmoke;
|
||||
background: $main-bg;
|
||||
$normal-bg-color: rgb(35, 38, 47);
|
||||
@chat-bg-color: rgb(105, 143, 244);
|
||||
@typing-bg-color: whitesmoke;
|
||||
background: @main-bg;
|
||||
@normal-bg-color: rgb(35, 38, 47);
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid $second-btn-color-tran;
|
||||
border-top: 1px solid @second-btn-color-tran;
|
||||
|
||||
&.typing {
|
||||
background: white;
|
||||
|
||||
.toolbar {
|
||||
background: $typing-bg-color;
|
||||
background: @typing-bg-color;
|
||||
}
|
||||
|
||||
input {
|
||||
background: $typing-bg-color !important;
|
||||
background: @typing-bg-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -469,7 +469,7 @@ export default {
|
||||
height: 4.4rem;
|
||||
margin: 0 1rem;
|
||||
padding: .5rem;
|
||||
background: $normal-bg-color;
|
||||
background: @normal-bg-color;
|
||||
border-radius: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -484,7 +484,7 @@ export default {
|
||||
flex: 1;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: $normal-bg-color;
|
||||
background: @normal-bg-color;
|
||||
}
|
||||
|
||||
.camera {
|
||||
@ -493,7 +493,7 @@ export default {
|
||||
width: 1.4rem;
|
||||
padding: .5rem;
|
||||
border-radius: 50%;
|
||||
background: $chat-bg-color;
|
||||
background: @chat-bg-color;
|
||||
}
|
||||
|
||||
}
|
||||
@ -503,7 +503,7 @@ export default {
|
||||
height: 4.4rem;
|
||||
margin: 0 1rem;
|
||||
padding: 1rem .5rem;
|
||||
background: $normal-bg-color;
|
||||
background: @normal-bg-color;
|
||||
border-radius: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -528,10 +528,10 @@ export default {
|
||||
|
||||
.option-wrapper {
|
||||
box-sizing: border-box;
|
||||
$grid-width: calc((100vw - 3rem) / 4);
|
||||
@grid-width: calc((100vw - 3rem) / 4);
|
||||
color: black;
|
||||
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 {
|
||||
display: flex;
|
||||
|
||||
@ -100,7 +100,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.ChatDetail {
|
||||
@ -120,7 +120,7 @@ export default {
|
||||
padding: 0 2rem;
|
||||
|
||||
.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;
|
||||
|
||||
.notice {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
font-size: 1.2rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
@ -166,7 +166,7 @@ export default {
|
||||
}
|
||||
|
||||
&.red{
|
||||
color: $primary-btn-color;
|
||||
color: @primary-btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -236,7 +236,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
#Message {
|
||||
@ -248,7 +248,7 @@ export default {
|
||||
//height: 100%;
|
||||
//width: 100%;
|
||||
overflow: auto;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
padding-bottom: 6rem;
|
||||
color: white;
|
||||
|
||||
@ -256,7 +256,7 @@ export default {
|
||||
padding-bottom: 6rem;
|
||||
|
||||
.joined-chat {
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
height: 5rem;
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
@ -327,7 +327,7 @@ export default {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $main-bg;
|
||||
background: @main-bg;
|
||||
//background: red;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -345,7 +345,7 @@ export default {
|
||||
border-radius: .2rem;
|
||||
|
||||
&.primary {
|
||||
background: $primary-btn-color;
|
||||
background: @primary-btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -386,7 +386,7 @@ export default {
|
||||
|
||||
.account {
|
||||
font-size: 1.3rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -411,7 +411,7 @@ export default {
|
||||
.notice-h2 {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.4rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
}
|
||||
@ -472,7 +472,7 @@ export default {
|
||||
|
||||
.num {
|
||||
margin-left: .5rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -543,7 +543,7 @@ export default {
|
||||
|
||||
|
||||
span {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
display: block;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
@ -552,7 +552,7 @@ export default {
|
||||
}
|
||||
|
||||
.line {
|
||||
border-top: 1px solid $line-color;
|
||||
border-top: 1px solid @line-color;
|
||||
}
|
||||
|
||||
.requests {
|
||||
@ -562,7 +562,7 @@ export default {
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
@ -627,7 +627,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 0 15px 0;
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
|
||||
.left {
|
||||
.name {
|
||||
@ -639,14 +639,14 @@ export default {
|
||||
.tag {
|
||||
margin-left: 5px;
|
||||
font-size: 1rem;
|
||||
background: $line-color;
|
||||
background: @line-color;
|
||||
padding: 2px 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 4px;
|
||||
|
||||
@ -693,7 +693,7 @@ export default {
|
||||
}
|
||||
|
||||
.not-more {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
@ -707,7 +707,7 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
width: 10px;
|
||||
@ -717,7 +717,7 @@ export default {
|
||||
|
||||
.right {
|
||||
border-radius: 50%;
|
||||
background: $second-text-color;
|
||||
background: @second-text-color;
|
||||
padding: 5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@ -757,7 +757,7 @@ export default {
|
||||
}
|
||||
|
||||
.detail {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 4px;
|
||||
}
|
||||
@ -769,7 +769,7 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.button {
|
||||
background: $primary-btn-color;
|
||||
background: @primary-btn-color;
|
||||
margin-left: 8px;
|
||||
padding: 8px 20px;
|
||||
border-radius: 3px;
|
||||
|
||||
@ -62,7 +62,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.edit-item {
|
||||
@ -73,11 +73,11 @@ export default {
|
||||
top: 0;
|
||||
|
||||
.save-yes {
|
||||
color: $primary-btn-color;
|
||||
color: @primary-btn-color;
|
||||
}
|
||||
|
||||
.save-no {
|
||||
color: $disable-primary-btn-color;
|
||||
color: @disable-primary-btn-color;
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -86,12 +86,12 @@ export default {
|
||||
|
||||
.notice, .num {
|
||||
font-size: 1.2rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
.input-ctn {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -105,7 +105,7 @@ export default {
|
||||
background: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -159,15 +159,15 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.ChatMessage {
|
||||
padding: 0 1rem;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
//$chat-bg-color: dodgerblue;
|
||||
$chat-bg-color: rgb(105, 143, 244);
|
||||
//@chat-bg-color: dodgerblue;
|
||||
@chat-bg-color: rgb(105, 143, 244);
|
||||
|
||||
&.right {
|
||||
justify-content: flex-end;
|
||||
@ -199,7 +199,7 @@ export default {
|
||||
|
||||
.time {
|
||||
width: 100%;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
text-align: center;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
@ -207,16 +207,16 @@ export default {
|
||||
|
||||
.red_packet {
|
||||
border-radius: .3rem;
|
||||
$not-received: rgb(253, 92, 72);
|
||||
$received: rgba(253, 92, 72, .8);
|
||||
@not-received: rgb(253, 92, 72);
|
||||
@received: rgba(253, 92, 72, .8);
|
||||
width: 60vw;
|
||||
background: $not-received;
|
||||
background: @not-received;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: rgb(255, 231, 206);
|
||||
|
||||
&.invalid {
|
||||
background: $received;
|
||||
background: @received;
|
||||
}
|
||||
|
||||
.top {
|
||||
@ -267,7 +267,7 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
background: $chat-bg-color;
|
||||
background: @chat-bg-color;
|
||||
|
||||
.resolve {
|
||||
display: flex;
|
||||
@ -315,7 +315,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 1.4rem;
|
||||
background: $chat-bg-color;
|
||||
background: @chat-bg-color;
|
||||
|
||||
.horn {
|
||||
width: 5rem;
|
||||
@ -390,7 +390,7 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
background: $chat-bg-color;
|
||||
background: @chat-bg-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
394
src/pages/message/components/swtich/switches.less
Normal file
394
src/pages/message/components/swtich/switches.less
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -91,4 +91,4 @@ export default {
|
||||
|
||||
</script>
|
||||
|
||||
<style src="./switches.scss" lang="scss"></style>
|
||||
<!--<style src="./switches.less" lang="less"></style>-->
|
||||
|
||||
@ -1614,7 +1614,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.ServiceProtocol {
|
||||
|
||||
@ -43,7 +43,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.AddressList {
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
width: 10px;
|
||||
@ -76,7 +76,7 @@ export default {
|
||||
|
||||
.right {
|
||||
border-radius: 50%;
|
||||
background: $second-text-color;
|
||||
background: @second-text-color;
|
||||
padding: 5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@ -88,7 +88,7 @@ export default {
|
||||
text-align: center;
|
||||
line-height: 6rem;
|
||||
height: 6rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.FaceToFace {
|
||||
|
||||
@ -200,7 +200,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.from-bottom-enter-active,
|
||||
@ -229,7 +229,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
|
||||
img {
|
||||
height: 2rem;
|
||||
@ -242,7 +242,7 @@ export default {
|
||||
|
||||
.title {
|
||||
margin-top: 2rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
@ -253,7 +253,7 @@ export default {
|
||||
align-items: center;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
font-size: 1.2rem;
|
||||
|
||||
img {
|
||||
@ -271,7 +271,7 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
border-radius: 50%;
|
||||
padding: 1rem;
|
||||
width: 2.4rem;
|
||||
@ -297,7 +297,7 @@ export default {
|
||||
|
||||
.text2 {
|
||||
font-size: 1.2rem;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -312,7 +312,7 @@ export default {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
margin-right: 1rem;
|
||||
@ -368,13 +368,13 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
$footer-border-color: #eaeaf1;
|
||||
@footer-border-color: #eaeaf1;
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
border-top: 1px solid $footer-border-color;
|
||||
border-top: 1px solid @footer-border-color;
|
||||
font-size: 1.4rem;
|
||||
|
||||
div {
|
||||
@ -383,7 +383,7 @@ export default {
|
||||
justify-content: center;
|
||||
width: 49%;
|
||||
text-align: center;
|
||||
border-right: 1px solid $footer-border-color;
|
||||
border-right: 1px solid @footer-border-color;
|
||||
opacity: .5;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
@ -441,7 +441,7 @@ export default {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
position: absolute;
|
||||
background: $second-btn-color-tran;
|
||||
background: @second-btn-color-tran;
|
||||
padding: .4rem;
|
||||
width: 1rem;
|
||||
border-radius: 50%;
|
||||
@ -457,7 +457,7 @@ export default {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
|
||||
img {
|
||||
margin-right: 1rem;
|
||||
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.Scan {
|
||||
@ -71,7 +71,7 @@ export default {
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
background: $second-btn-color-tran;
|
||||
background: @second-btn-color-tran;
|
||||
padding: 1.6rem;
|
||||
height: 2.4rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@ -70,7 +70,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="less">
|
||||
@import "../../../assets/scss/index";
|
||||
|
||||
.scale-enter-active,
|
||||
@ -103,7 +103,7 @@ export default {
|
||||
}
|
||||
|
||||
.add {
|
||||
background: $second-btn-color-tran;
|
||||
background: @second-btn-color-tran;
|
||||
margin-right: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
width: 1.8rem;
|
||||
@ -124,7 +124,7 @@ export default {
|
||||
}
|
||||
|
||||
.detail {
|
||||
color: $second-text-color;
|
||||
color: @second-text-color;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 4px;
|
||||
}
|
||||
@ -145,7 +145,7 @@ export default {
|
||||
}
|
||||
|
||||
&.red {
|
||||
background: $primary-btn-color;
|
||||
background: @primary-btn-color;
|
||||
}
|
||||
|
||||
}
|
||||
@ -163,7 +163,7 @@ export default {
|
||||
bottom: -100%;
|
||||
right: 1rem;
|
||||
border-radius: .8rem;
|
||||
background: $second-btn-color;
|
||||
background: @second-btn-color;
|
||||
|
||||
.item {
|
||||
font-size: 1.4rem;
|
||||
@ -171,11 +171,11 @@ export default {
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $line-color;
|
||||
border-bottom: 1px solid @line-color;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
border-bottom: none;
|
||||
color: $primary-btn-color;
|
||||
color: @primary-btn-color;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -188,7 +188,7 @@ export default {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: .7rem solid transparent;
|
||||
border-bottom: .7rem solid $second-btn-color;
|
||||
border-bottom: .7rem solid @second-btn-color;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: -1.4rem;
|
||||
|
||||
@ -42,6 +42,7 @@ import PasswordLogin from "../pages/login/PasswordLogin";
|
||||
import VerificationCode from "../pages/login/VerificationCode";
|
||||
import RetrievePassword from "../pages/login/RetrievePassword";
|
||||
import Help from "../pages/login/Help";
|
||||
import Attention2 from "../pages/home/Attention2";
|
||||
|
||||
const routes = [
|
||||
// {path: '', component: Music},
|
||||
@ -49,6 +50,7 @@ const routes = [
|
||||
{path: '/', component: Index2},
|
||||
{path: '/home', component: Index},
|
||||
{path: '/attention', component: Attention},
|
||||
// {path: '/attention', component: Attention2},
|
||||
{path: '/publish', component: Publish},
|
||||
{path: '/test', component: Test},
|
||||
{path: '/message', component: Message},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user