scss to less

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

 <template>
-    <span class="file-icon" :title="value" v-html="html"></span>
+  <span class="file-icon" :title="value" v-html="html"></span>
 </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
+  @Model("update")
+  private value!: FileType;
 
-    private get audio() {
-        return this.value === FileType.Audio;
-    }
+  private get audio() {
+    return this.value === FileType.Audio;
+  }
 
-    private get excel() {
-        return this.value === FileType.Excel;
-    }
+  private get excel() {
+    return this.value === FileType.Excel;
+  }
 
-    private get image() {
-        return this.value === FileType.Image;
-    }
+  private get image() {
+    return this.value === FileType.Image;
+  }
 
-    private get others() {
-        return this.value === FileType.Others;
-    }
+  private get others() {
+    return this.value === FileType.Others;
+  }
 
-    private get pdf() {
-        return this.value === FileType.Pdf;
-    }
+  private get pdf() {
+    return this.value === FileType.Pdf;
+  }
 
-    private get ppt() {
-        return this.value === FileType.Ppt;
-    }
+  private get ppt() {
+    return this.value === FileType.Ppt;
+  }
 
-    private get rp() {
-        return this.value === FileType.Rp;
-    }
+  private get rp() {
+    return this.value === FileType.Rp;
+  }
 
-    private get txt() {
-        return this.value === FileType.Txt;
-    }
+  private get txt() {
+    return this.value === FileType.Txt;
+  }
 
-    private get video() {
-        return this.value === FileType.Video;
-    }
+  private get video() {
+    return this.value === FileType.Video;
+  }
 
-    private get word() {
-        return this.value === FileType.Word;
-    }
+  private get word() {
+    return this.value === FileType.Word;
+  }
 
-    private get xmid() {
-        return this.value === FileType.Xmind;
-    }
+  private get xmid() {
+    return this.value === FileType.Xmind;
+  }
 
-    private get zip() {
-        return this.value === FileType.Zip;
-    }
+  private get zip() {
+    return this.value === FileType.Zip;
+  }
 
-    private get html() {
-        return getSvg(this.value);
-    }
+  private get html() {
+    return getSvg(this.value);
+  }
 }
 </script>
 
-<style lang="scss">
+<style lang="less" scoped>
 .file-icon {
-    margin-left: 10px;
+  margin-left: 10px;
 
-    svg {
-        max-width: 36px;
-        max-height: 36px;
-    }
+  svg {
+    max-width: 36px;
+    max-height: 36px;
+  }
 }
 </style>

components/image-preview.vue

 <template>
-    <el-dialog
-        :modal="false"
-        :before-close="close"
-        :visible="value"
-        custom-class="hide-header show-close padding-0 width-auto"
-    >
-        <div class="d-flex flex-column">
-            <div class="preview-title text-center">图片预览</div>
+  <el-dialog
+    :modal="false"
+    :before-close="close"
+    :visible="value"
+    custom-class="hide-header show-close padding-0 width-auto"
+  >
+    <div class="d-flex flex-column">
+      <div class="preview-title text-center">图片预览</div>
 
-            <div class="d-flex justify-content-center" style="min-width: 300px">
-                <img v-if="file" :src="file.url" :style="style" />
-            </div>
+      <div class="d-flex justify-content-center" style="min-width: 300px">
+        <img v-if="file" :src="file.url" :style="style" />
+      </div>
 
-            <div class="d-flex justify-content-center actions">
-                <span
-                    class="d-flex align-items-center justify-content-center"
-                    @click="set2Default"
-                    >1:1</span
-                >
-                <a
-                    class="d-flex align-items-center justify-content-center"
-                    :href="file.url | downloadUrl(getAttachment)"
-                    :download="getAttachment"
-                >
-                    <i class="el-icon-download"></i>
-                </a>
-            </div>
-        </div>
-    </el-dialog>
+      <div class="d-flex justify-content-center actions">
+        <span
+          class="d-flex align-items-center justify-content-center"
+          @click="set2Default"
+          >1:1</span
+        >
+        <a
+          class="d-flex align-items-center justify-content-center"
+          :href="file.url | downloadUrl(getAttachment)"
+          :download="getAttachment"
+        >
+          <i class="el-icon-download"></i>
+        </a>
+      </div>
+    </div>
+  </el-dialog>
 </template>
 
 <script lang="ts">
@@ -35,73 +35,72 @@ import { Component, Model, Prop, Vue } from "vue-property-decorator";
 
 @Component({ components: {} })
 export default class ImagePreview extends Vue {
-    @Model("update")
-    private value!: boolean
+  @Model("update")
+  private value!: boolean;
 
-    @Prop()
-    private file!: { name: string; url: string }
+  @Prop()
+  private file!: { name: string; url: string };
 
-    private style: {
-        "max-height": number | string;
-        "max-width": number | string;
-    } = {
-        "max-height": "300px",
-        "max-width": "600px",
-    }
+  private style: {
+    "max-height": number | string;
+    "max-width": number | string;
+  } = {
+    "max-height": "300px",
+    "max-width": "600px",
+  };
 
-    private close() {
-        setTimeout(
-            () =>
-                (this.style = { "max-height": "300px", "max-width": "600px" }),
-            300
-        );
-        this.$emit("update", false);
-    }
+  private close() {
+    setTimeout(
+      () => (this.style = { "max-height": "300px", "max-width": "600px" }),
+      300
+    );
+    this.$emit("update", false);
+  }
 
-    private set2Default() {
-        this.style = { "max-height": "1600px", "max-width": "1600px" };
-    }
+  private set2Default() {
+    this.style = { "max-height": "1600px", "max-width": "1600px" };
+  }
 
-    private get getAttachment() {
-        if (this.file) {
-            return this.file.name;
-        }
-        return "文件下载";
+  private get getAttachment() {
+    if (this.file) {
+      return this.file.name;
     }
+    return "文件下载";
+  }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .preview-title {
-    font-size: 18px;
-    color: #333;
-    margin-bottom: 15px;
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 15px;
 }
 
 .actions {
-    margin: 15px 0;
+  margin: 15px 0;
 
-    > span,
-    a {
-        width: 30px;
-        height: 30px;
-        background-color: #7a7b7d;
-        color: #fff;
-        border-radius: 50%;
-        cursor: pointer;
+  > span,
+  a {
+    width: 30px;
+    height: 30px;
+    background-color: #7a7b7d;
+    color: #fff;
+    border-radius: 50%;
+    cursor: pointer;
 
-        i {
-            color: #fff;
-            font-size: 20px;
-        }
-
-        & + span {
-            margin-left: 15px;
-        }
+    i {
+      color: #fff;
+      font-size: 20px;
     }
 
-    > a {
-        margin-left: 15px;
+    & + span {
+      margin-left: 15px;
     }
+  }
+
+  > a {
+    margin-left: 15px;
+  }
 }
 </style>

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

 <template>
-    <el-dialog
-        :modal="false"
-        :before-close="close"
-        :visible="value"
-        custom-class="hide-header show-close padding-0 width-auto"
-    >
-        <div class="d-flex flex-column">
-            <div class="preview-title text-center">视频预览</div>
-
-            <div class="d-flex justify-content-center" style="min-width: 300px">
-                <video
-                    ref="video"
-                    v-if="file"
-                    :src="file.url"
-                    controls
-                    :style="style"
-                ></video>
-            </div>
-
-            <div class="d-flex justify-content-center actions">
-                <span
-                    class="d-flex align-items-center justify-content-center"
-                    @click="set2Default"
-                    >1:1</span
-                >
-                <a
-                    class="d-flex align-items-center justify-content-center"
-                    :href="file.url | downloadUrl(getAttachment)"
-                    :download="getAttachment"
-                >
-                    <i class="el-icon-download"></i>
-                </a>
-            </div>
-        </div>
-    </el-dialog>
+  <el-dialog
+    :modal="false"
+    :before-close="close"
+    :visible="value"
+    custom-class="hide-header show-close padding-0 width-auto"
+  >
+    <div class="d-flex flex-column">
+      <div class="preview-title text-center">视频预览</div>
+
+      <div class="d-flex justify-content-center" style="min-width: 300px">
+        <video
+          ref="video"
+          v-if="file"
+          :src="file.url"
+          controls
+          :style="style"
+        ></video>
+      </div>
+
+      <div class="d-flex justify-content-center actions">
+        <span
+          class="d-flex align-items-center justify-content-center"
+          @click="set2Default"
+          >1:1</span
+        >
+        <a
+          class="d-flex align-items-center justify-content-center"
+          :href="file.url | downloadUrl(getAttachment)"
+          :download="getAttachment"
+        >
+          <i class="el-icon-download"></i>
+        </a>
+      </div>
+    </div>
+  </el-dialog>
 </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
-
-    @Prop()
-    private file!: { name: string; url: string }
-
-    @Ref("video")
-    private video!: HTMLVideoElement
-
-    private style: {
-        "max-height": number | string;
-        "max-width": number | string;
-    } = {
-        "max-height": "800px",
-        "max-width": "800px",
+  @Model("update")
+  private value!: boolean;
+
+  @Prop()
+  private file!: { name: string; url: string };
+
+  @Ref("video")
+  private video!: HTMLVideoElement;
+
+  private style: {
+    "max-height": number | string;
+    "max-width": number | string;
+  } = {
+    "max-height": "800px",
+    "max-width": "800px",
+  };
+
+  private close() {
+    setTimeout(
+      () => (this.style = { "max-height": "300px", "max-width": "600px" }),
+      300
+    );
+    this.$emit("update", false);
+  }
+
+  private set2Default() {
+    this.style = { "max-height": "1600px", "max-width": "1600px" };
+  }
+
+  private get getAttachment() {
+    if (this.file) {
+      return this.file.name;
     }
-
-    private close() {
-        setTimeout(
-            () =>
-                (this.style = { "max-height": "300px", "max-width": "600px" }),
-            300
-        );
-        this.$emit("update", false);
-    }
-
-    private set2Default() {
-        this.style = { "max-height": "1600px", "max-width": "1600px" };
-    }
-
-    private get getAttachment() {
-        if (this.file) {
-            return this.file.name;
-        }
-        return "视频下载";
-    }
-
-    @Watch("value")
-    private onOpen() {
-        if (this.value) {
-            this.video?.load();
-            setTimeout(() => this.video?.play(), 100);
-        } else {
-            this.video?.pause();
-        }
+    return "视频下载";
+  }
+
+  @Watch("value")
+  private onOpen() {
+    if (this.value) {
+      this.video?.load();
+      setTimeout(() => this.video?.play(), 100);
+    } else {
+      this.video?.pause();
     }
+  }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .preview-title {
-    font-size: 18px;
-    color: #333;
-    margin-bottom: 15px;
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 15px;
 }
 
 .actions {
-    margin: 15px 0;
-
-    > span,
-    a {
-        width: 30px;
-        height: 30px;
-        background-color: #7a7b7d;
-        color: #fff;
-        border-radius: 50%;
-        cursor: pointer;
-
-        i {
-            color: #fff;
-            font-size: 20px;
-        }
-
-        & + span {
-            margin-left: 15px;
-        }
+  margin: 15px 0;
+
+  > span,
+  a {
+    width: 30px;
+    height: 30px;
+    background-color: #7a7b7d;
+    color: #fff;
+    border-radius: 50%;
+    cursor: pointer;
+
+    i {
+      color: #fff;
+      font-size: 20px;
     }
 
-    > a {
-        margin-left: 15px;
+    & + span {
+      margin-left: 15px;
     }
+  }
+
+  > a {
+    margin-left: 15px;
+  }
 }
 </style>

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;