diff --git a/package-lock.json b/package-lock.json index 20eee38..2481c4b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12338,6 +12338,21 @@ } } }, + "vue-switches": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/vue-switches/-/vue-switches-2.0.1.tgz", + "integrity": "sha512-rDqBtK3TKy1pEvyZeWmnSHVeXqAcn+ozch7LiNThBzr1QMjg5rhvqBY7uWeli/baDDslf6CXmBJbHPwASJLqoA==", + "requires": { + "vue": "^2.2.6" + }, + "dependencies": { + "vue": { + "version": "2.6.14", + "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz", + "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==" + } + } + }, "vue-template-es2015-compiler": { "version": "1.9.1", "resolved": "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz", diff --git a/package.json b/package.json index d15df62..a8de120 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "swiper": "^6.7.5", "vue": "^3.0.0", "vue-router": "^4.0.8", + "vue-switches": "^2.0.1", "vuex": "^4.0.1" }, "devDependencies": { diff --git a/src/App.vue b/src/App.vue index 3d38c6e..8a5d3de 100644 --- a/src/App.vue +++ b/src/App.vue @@ -59,6 +59,7 @@ export default { '/scan', '/face-to-face', '/chat', + '/chat-detail', '', ]; const toDepth = routeDeep.indexOf(to.path) diff --git a/src/components/Search.vue b/src/components/Search.vue index e78c7ea..8cd7d55 100644 --- a/src/components/Search.vue +++ b/src/components/Search.vue @@ -2,7 +2,7 @@
- +
diff --git a/src/pages/message/Chat.vue b/src/pages/message/Chat.vue index 28a617a..87953ec 100644 --- a/src/pages/message/Chat.vue +++ b/src/pages/message/Chat.vue @@ -9,36 +9,40 @@
- +
-
-
- -
- {{ item.time }} -
- -
- -
{{ item.data }}
- -
-
- -
{{ item.data }}
- +
+ +
+
+
+ + + + + +
+
+ 按住 说话 + +
+
+
+
+ + 照片 +
+ + diff --git a/src/pages/message/components/ChatMessage.vue b/src/pages/message/components/ChatMessage.vue new file mode 100644 index 0000000..a5f41ab --- /dev/null +++ b/src/pages/message/components/ChatMessage.vue @@ -0,0 +1,408 @@ + + + + diff --git a/src/pages/message/components/swtich/switches.scss b/src/pages/message/components/swtich/switches.scss new file mode 100644 index 0000000..2112d0e --- /dev/null +++ b/src/pages/message/components/swtich/switches.scss @@ -0,0 +1,275 @@ +/** + * 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%); + } + } + } + } + } + } + } + +} diff --git a/src/pages/message/components/swtich/switches.vue b/src/pages/message/components/swtich/switches.vue new file mode 100644 index 0000000..e91d626 --- /dev/null +++ b/src/pages/message/components/swtich/switches.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/src/pages/people/components/People.vue b/src/pages/people/components/People.vue index 13a92bf..47debca 100644 --- a/src/pages/people/components/People.vue +++ b/src/pages/people/components/People.vue @@ -1,14 +1,16 @@