Skip to content

foreign / customer-service

Go to a project
Commit 1afba5a5 by panjiangyi
Options

scss to less

parent 86932012
Expand all
Inline Side-by-side
Showing with 245 additions and 241 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
<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;
......
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