Skip to content

foreign / customer-service

Go to a project
Commit 1afba5a5 by panjiangyi
Options

scss to less

parent 86932012
Inline Side-by-side
Showing with 55 additions and 56 deletions
chat-list.vue
......@@ -207,7 +207,7 @@ export default class ChatList extends Vue {
}
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
.chat-list-con {
.title {
padding-left: 20px;
......
chat-room.vue
......@@ -178,7 +178,7 @@ export default class ChatRoom extends Vue {
}
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
.room-title {
font-size: 16px;
padding: 0 20px;
......@@ -270,7 +270,7 @@ export default class ChatRoom extends Vue {
}
}
.chat-area {
$input-height: 130px;
--input-height: 130px;
.chat-messages {
height: calc(100% - 130px + 1px);
......@@ -278,7 +278,7 @@ export default class ChatRoom extends Vue {
}
.chat-input {
height: $input-height;
height: var(--input-height);
}
}
.order-info-con {
......
chat.vue
......@@ -46,7 +46,7 @@ export default class Chat extends Vue {
}
}
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
.chat-dialog-con {
/deep/ .el-dialog__header {
display: none;
......
components/file-icon.vue
......@@ -3,15 +3,14 @@
</template>
<script lang="ts">
import { Component, Model, Vue } from "vue-property-decorator"
;
import { Component, Model, Vue } from "vue-property-decorator";
import { FileType, getSvg } from "./file-controller";
@Component({ components: {} })
export default class FileIcon extends Vue {
@Model("update")
private value!: FileType
private value!: FileType;
private get audio() {
return this.value === FileType.Audio;
......@@ -67,7 +66,7 @@ export default class FileIcon extends Vue {
}
</script>
<style lang="scss">
<style lang="less" scoped>
.file-icon {
margin-left: 10px;
......
components/image-preview.vue
......@@ -36,10 +36,10 @@ import { Component, Model, Prop, Vue } from "vue-property-decorator";
@Component({ components: {} })
export default class ImagePreview extends Vue {
@Model("update")
private value!: boolean
private value!: boolean;
@Prop()
private file!: { name: string; url: string }
private file!: { name: string; url: string };
private style: {
"max-height": number | string;
......@@ -47,12 +47,11 @@ export default class ImagePreview extends Vue {
} = {
"max-height": "300px",
"max-width": "600px",
}
};
private close() {
setTimeout(
() =>
(this.style = { "max-height": "300px", "max-width": "600px" }),
() => (this.style = { "max-height": "300px", "max-width": "600px" }),
300
);
this.$emit("update", false);
......@@ -71,7 +70,7 @@ export default class ImagePreview extends Vue {
}
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
.preview-title {
font-size: 18px;
color: #333;
......
components/message.vue
......@@ -430,7 +430,7 @@ export default class Message extends Vue {
}
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
.message-con {
margin: 20px 0;
......
components/video-preview.vue
......@@ -37,18 +37,25 @@
</template>
<script lang="ts">
import { Component, Model, Prop, Ref, Vue, Watch } from "vue-property-decorator";
import {
Component,
Model,
Prop,
Ref,
Vue,
Watch,
} from "vue-property-decorator";
@Component({ components: {} })
export default class VideoPreview extends Vue {
@Model("update")
private value!: boolean
private value!: boolean;
@Prop()
private file!: { name: string; url: string }
private file!: { name: string; url: string };
@Ref("video")
private video!: HTMLVideoElement
private video!: HTMLVideoElement;
private style: {
"max-height": number | string;
......@@ -56,12 +63,11 @@ export default class VideoPreview extends Vue {
} = {
"max-height": "800px",
"max-width": "800px",
}
};
private close() {
setTimeout(
() =>
(this.style = { "max-height": "300px", "max-width": "600px" }),
() => (this.style = { "max-height": "300px", "max-width": "600px" }),
300
);
this.$emit("update", false);
......@@ -90,7 +96,7 @@ export default class VideoPreview extends Vue {
}
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
.preview-title {
font-size: 18px;
color: #333;
......
components/who-read-list.vue
......@@ -138,7 +138,7 @@ export default class WhoReadList extends Vue {
}
}
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
.who-read-list {
::before {
content: "";
......
create-chat.vue
......@@ -88,4 +88,4 @@ export default class ChatCreator extends Vue {
}
}
</script>
<style lang="scss" scoped></style>
<style lang="less" scoped></style>
hybrid-input/index.vue
......@@ -512,7 +512,7 @@ export default class Input extends Vue {
}
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
.input-wrap {
position: relative;
padding-left: 20px;
......
message-list.vue
......@@ -14,9 +14,7 @@
<div :key="item.id" class="message-template">
<div
v-if="
item.id > 0 &&
messageTimestampDictionary[item.id] &&
item.msg
item.id > 0 && messageTimestampDictionary[item.id] && item.msg
"
class="text-center text-hint timestamp"
>
......@@ -35,10 +33,7 @@
</el-scrollbar>
<image-preview v-model="preview" :file="imagePreview"></image-preview>
<video-preview
v-model="previewVideo"
:file="videoPreview"
></video-preview>
<video-preview v-model="previewVideo" :file="videoPreview"></video-preview>
</div>
</template>
......@@ -57,34 +52,34 @@ import { ChatStore, chatStore } from "@/customer-service/store/model";
@Component({ components: { message, ImagePreview, VideoPreview } })
export default class MessageList extends Vue {
@chatStore.Getter(ChatStore.STATE_CHAT_MSG_HISTORY)
private readonly historyMessage!: ChatStore.STATE_CHAT_MSG_HISTORY
private readonly historyMessage!: ChatStore.STATE_CHAT_MSG_HISTORY;
@chatStore.Getter(ChatStore.STATE_CHAT_SENDING_MESSAGES)
private readonly sendingMessages!: ChatStore.STATE_CHAT_SENDING_MESSAGES
private readonly sendingMessages!: ChatStore.STATE_CHAT_SENDING_MESSAGES;
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID
private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
@chatStore.State(ChatStore.STATE_CURRENT_CHAT_INITING)
private readonly chatIniting!: ChatStore.STATE_CURRENT_CHAT_INITING
private readonly chatIniting!: ChatStore.STATE_CURRENT_CHAT_INITING;
@chatStore.Action(ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID)
private readonly getLastPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID
private readonly getLastPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID;
@chatStore.Action(ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID)
private readonly getNextPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID
private readonly getNextPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID;
@chatStore.Action(ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA)
private readonly clearChatId!: ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA
private readonly clearChatId!: ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA;
@chatStore.Mutation(ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM)
private readonly saveScrollToBottomFunc!: ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM
private readonly saveScrollToBottomFunc!: ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM;
@chatStore.Mutation(ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM)
private readonly clearScrollToBottomFunc!: ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM
private readonly clearScrollToBottomFunc!: ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM;
@Prop({ default: "circle" })
private shape!: string
private shape!: string;
private get messages() {
if (this.historyMessage) {
......@@ -104,20 +99,20 @@ export default class MessageList extends Vue {
}
// 添加时间戳的最大间隔消息数
private readonly timeLimit = 48
private readonly timeLimit = 48;
private scroll2EndWhenMessageLoaded = false
private scroll2EndWhenMessageLoaded = false;
private preview = false
private imagePreview = {}
private preview = false;
private imagePreview = {};
private previewVideo = false
private videoPreview = {}
private previewVideo = false;
private videoPreview = {};
@Ref("message-scrollbar")
private scollbarElement!: Vue & {
update: () => void;
}
};
private get scollWrapper(): HTMLElement | null {
return this.scollbarElement?.$el?.firstChild as HTMLElement;
......@@ -168,9 +163,9 @@ export default class MessageList extends Vue {
return dic;
}
private loading = false
private loadingOld = false
private loadingNew = false
private loading = false;
private loadingOld = false;
private loadingNew = false;
public created() {
this.handleScrollWrapper();
......@@ -234,7 +229,7 @@ export default class MessageList extends Vue {
this.loadingNew = false;
}
private handleScroll!: () => void
private handleScroll!: () => void;
private handleScrollWrapper() {
let oldScrollTop = 0;
this.handleScroll = () => {
......@@ -353,7 +348,7 @@ export default class MessageList extends Vue {
}
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
.message-list {
padding: 0 20px;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment