Commit 85b4b2ad authored by lshan's avatar lshan

Merge remote-tracking branch 'origin/main' into ls_tev

parents e776ba73 3ba90d23
This diff is collapsed.
......@@ -40,7 +40,9 @@
"eslint-plugin-vue": "^6.2.2",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"node-sass": "^4.14.1",
"postcss": "^7.0.36",
"sass-loader": "^7.3.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
"typescript": "~4.1.5",
"vue-template-compiler": "^2.6.11"
......
<template>
<div class="top-0 left-0 w-full py-1.5 flex items-center" :class="bgColor">
<div class="py-1.5 flex items-center" :class="bgColor">
<div class="input-wrapper flex-1 relative">
<app-icon
icon-name="search-light"
......@@ -10,7 +10,7 @@
ref="c-search-input"
type="search"
class="py-2 rounded-full w-full pl-9"
:class="clearable ? 'pr-9' : 'pr-4'"
:class="getInputClass"
:placeholder="placeholder"
:value="value"
@input="handleInput"
......@@ -29,7 +29,7 @@
/>
</div>
</div>
<div class="right flex-shrink-0 ml-4">
<div class="right flex-shrink-0 ml-4" v-if="showCancel">
<slot name='action'>
<div @click="$emit('cancel')">取消</div>
</slot>
......@@ -59,7 +59,12 @@ export default Vue.extend({
type: String,
default: '请输入..'
},
value: String
value: String,
showCancel: {
type: Boolean,
default: true
},
inputClass: String
},
data() {
return {
......@@ -68,6 +73,11 @@ export default Vue.extend({
showError: false
}
},
computed: {
getInputClass() {
return `${this.inputClass || ''} ${this.clearable ? 'pr-9' : 'pr-4'}`
}
},
mounted() {
(this.$refs['c-search-input'] as HTMLInputElement).focus()
},
......
......@@ -59,6 +59,22 @@ export const scheduleRoutes: Array<RouteConfig> = [
}
},
{
path: 'test',
name: 'Test',
component: () => import('@/views/schedule/test.vue'),
meta: {
title: 'Test'
}
},
{
path: 'file',
name: 'File',
component: () => import('@/views/schedule/file.vue'),
meta: {
title: '附件'
}
},
{
path: 'speech-recognition',
name: 'SpeechRecognition',
component: () => import('@/views/schedule/speech-recognition.vue'),
......
......@@ -25,7 +25,7 @@
<div
slot="action"
class="text-color-primary font-medium"
@click="$router.replace('/search-client')"
@click="$router.replace('/client/search-client')"
>
取消
</div>
......
<template>
<!-- 附件 -->
<main-page
left-arrow
main-bg="bg-white"
header-bg="bg-white"
@click-left="$router.go(-1)"
>
<div
slot="right"
class="text-color-primary font-medium"
@click="select"
>
{{ checkBox ? '取消' : '选择' }}
</div>
<!-- <div class="sticky top-12 pt-2 px-4 bg-white">
<div class="input-wrapper relative">
<div class="absolute left-1 top-1/2 transform -translate-y-1/2">
<app-icon icon-name="search-light" />
</div>
<input
class="w-full rounded-full py-2 px-8 bg-common-bg"
placeholder="输入文件名、上传人昵称"
type="text"
>
</div>
</div> -->
<div class="pt-12 px-4 pb-4">
<search-bar
v-model="search"
:show-cancel="false"
placeholder="输入文件名、上传人昵称"
class="sticky top-12"
bg-color="bg-white"
input-class="bg-common-bg"
@search="handleSearch"
/>
<div
v-for="f in files"
:key="f.id"
class="py-2.5 border-b flex items-center"
@click="handleSelect(f)"
>
<div class="mr-4" v-if="checkBox">
<app-icon
:icon-name="checked.indexOf(f.id) > -1 ? 'radio-checked' : 'radio'"
class-name="h-4 w-4"
/>
</div>
<div class="flex items-center flex-1 overflow-hidden">
<app-icon
:icon-name="f.type"
class-name="h-15 w-15"
/>
<div class="ml-2.5 flex-1 overflow-hidden">
<div class="title truncate">{{ f.fileName }}</div>
<div class="text-sm text-text-secondary">
<span class="">{{ f.time }}</span>
<span class="ml-5">{{ f.size }}</span>
</div>
<div class="text-sm font-medium text-text-secondary truncate">{{ f.uploader }}</div>
</div>
</div>
</div>
<!-- <div class="py-2.5 border-b flex items-center">
<div class="mr-4">
<app-icon
icon-name="radio"
class-name="h-4 w-4"
/>
</div>
<div class="flex items-center flex-1 overflow-hidden">
<app-icon
icon-name="xlsx"
class-name="h-15 w-15"
/>
<div class="ml-2.5 flex-1 overflow-hidden">
<div class="title truncate">文件名.xlsx</div>
<div class="text-sm text-text-secondary">
<span class="">2019/02/11</span>
<span class="ml-5">1.3MB</span>
</div>
<div class="text-sm font-medium text-text-secondary truncate">备注/昵称</div>
</div>
</div>
</div> -->
</div>
</main-page>
</template>
<script lang="ts">
import Vue from "vue";
interface File {
id: number,
fileName: string,
type: string,
size: string,
uploader: string,
time: string
}
const files: Array<File> = [
{
id: 1,
fileName: '文件名.xlsx',
type: 'xlsx',
size: '1.3MB',
uploader: '上传备注/昵称',
time: '2019/02/11'
},
{
id: 2,
fileName: '文件名文件名文件名文件名文件名文件名.docx',
type: 'docx',
size: '666.66KB',
uploader: '上传备注/昵称',
time: '2019/02/11'
}
]
export default Vue.extend({
name: "File",
components: {
'main-page': () => import('@/layout/main-page.vue'),
'app-icon': () => import('@/components/common/Icon.vue'),
'search-bar': () => import('@/components/common/search-bar.vue')
},
created() {
// console.log(Mock, 'mock')
},
data() {
const checked: Array<Number> = []
return {
files,
checked,
search: '',
checkBox: false
}
},
methods: {
handleSearch() {
console.log(this.search, 'kk')
},
select() {
this.checkBox = !this.checkBox
this.checked = this.checkBox ? this.checked : []
},
handleSelect(file: File) {
if (this.checkBox) {
// const index = this.checked.findIndex(id => id === file.id)
// if (index < 0) {
// this.checked.push(file.id)
// } else {
// this.checked.splice(index, 1)
// }
this.checked = [file.id]
}
}
}
})
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
......@@ -84,7 +84,7 @@ export default Vue.extend({
<style lang="less" scoped>
.larg{
animation:larg 2s linear infinite alternate ;
animation:larg 1s linear infinite alternate ;
}
.long{
animation:long 1s linear infinite alternate;
......
......@@ -5,7 +5,35 @@
@click-left="$router.go(-1)"
>
<div class="pt-14 px-4">
Test
<div class="h-80 w-80 mx-auto flex items-center justify-center relative border rounded-full border-text-extreme-light">
<div class="h-64 w-64 relative">
<div class="line-wrapper relative">
<div
v-for="i of 6"
:key="i"
class="h-64 w-px bg-schedule-timeline line"
:class="`line-${i}`"
/>
</div>
<div class="h-56 w-56 bg-common-bg rounded-full center" />
<div class="h-48 w-48 border center rounded-full flex items-center justify-center">
Time
</div>
</div>
<div class="absolute top-0 right-0 w-40 h-40">
<div class="h-full w-full overflow-hidden relative">
<div class="h-full w-full circle xxx absolute top-0 left-0"></div>
<div class="h-full w-full circle yyy absolute top-0 left-0"></div>
<div class="h-full w-full circle zzz absolute -top-px left-px"></div>
</div>
</div>
<div class="absolute top-0 right-0 w-40 h-40 zzz">
<div class="h-full w-full overflow-hidden relative">
<div class="h-full w-full circle xxx absolute top-0 left-0"></div>
<div class="h-full w-full circle yyy absolute top-0 left-0"></div>
</div>
</div>
</div>
</div>
</main-page>
</template>
......@@ -27,4 +55,50 @@ export default Vue.extend({
</script>
<style lang="scss" scoped>
@mixin center {
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%,-50%)
}
.center {
@include center;
}
.line {
position: absolute;
left: 50%;
}
@for $i from 1 to 6 {
.line-#{$i} {
transform: rotate(30deg * $i) translateX(-50%);
}
}
.circle {
border: solid;
border-width: 8px 8px 0 0;
border-top-right-radius: 400px;
transform-origin: bottom left;
&.xxx {
border-color: green;
}
&.yyy {
border-color: blue;
transform: rotate(18deg)
}
&.zzz {
border-width: 10px 10px 0 0;
border-color: #f6f7f8;
transform: rotate(45deg)
}
}
.zzz {
transform-origin: bottom left;
transform: rotate(-115deg)
}
</style>
\ No newline at end of file
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 to comment