新增模块

src/components/u-info/index.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="m-info">
+        <el-popover
+                placement="bottom"
+        >
+            <template #reference>
+                <el-badge :value="3" type="primary" class="item">
+                    <el-icon><Bell /></el-icon>
+                </el-badge>
+            </template>
+            <div>
+                sssssssssss
+            </div>
+        </el-popover>
+
+
+    </div>
+
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+.m-info{
+    width: 34px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all .3s;
+    .item{
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+</style>

src/components/u-screenfull/index.vue

@@ -1,8 +1,10 @@
 <template>
-  <el-icon
-      title="全屏"
-      @click.stop="click"
-      style="margin-right: 10px;cursor: pointer" ><full-screen /></el-icon>
+  <div class="m-screenful">
+    <el-icon
+            title="全屏"
+            @click.stop="click"
+            style="margin-right: 10px;cursor: pointer" ><full-screen /></el-icon>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -47,6 +49,13 @@
   })
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+  .m-screenful{
+    width: 34px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all .3s;
+  }
 </style>

src/components/u-upload/index.vue

@@ -2,7 +2,8 @@
     <el-upload
             action=""
             :before-upload="beforeUploadAction"
-            list-type="picture-card"
+            :list-type="listType"
+            :multiple="multiple"
             :on-preview="handlePictureCardPreview"
             :on-remove="handleRemove"
             :file-list="fileList"
@@ -23,7 +24,19 @@
     import {ElMessage} from "element-plus";
     let emit = defineEmits(['update'])
     let props = defineProps({
-        modelValue:Array
+        modelValue:Array,
+        multiple:{
+            type:Boolean,
+            default:true
+        },
+        listType:{
+            type:String,
+            default:'picture-card'
+        },
+        showFileList:{
+            type:Boolean,
+            default:true
+        }
     })
     let fileList = ref([
 

src/layout/components/TagsView/index.vue

@@ -10,8 +10,12 @@
           tag="span"
           class="tags-view-item"
       >
-        {{ tag.title }}
-        <el-icon v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)" ><circle-close-filled /></el-icon>
+        <div class="tags-inner">
+          <span >{{ tag.title }}</span>
+          <el-icon v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)"
+                   class="tag-icon"
+          ><circle-close-filled /></el-icon>
+        </div>
       </router-link>
     </scroll-pane>
 
@@ -171,32 +175,52 @@
     border: 1px solid #d8dce5;
     color: #495060;
     background: #fff;
-    padding: 0 8px;
     font-size: 12px;
     padding: 0 10px;
     box-sizing: border-box;
     margin-left: 5px;
     margin-top: 4px;
+    /*display: flex;*/
+    /*align-items: center;*/
     &:first-of-type {
       margin-left: 15px;
     }
     &:last-of-type {
       margin-right: 15px;
     }
+    .tags-inner{
+      display: flex;
+      align-items: center;
+    }
+    .tag-icon{
+      margin-left: 6px;
+    }
+    .tag-icon{
+      display: none;
+    }
+    &:hover{
+      .tag-icon{
+        display: block;
+
+      }
+    }
+    &.active .tag-icon{
+      display: block;
+    }
     &.active {
       background-color: #42b983;
       color: #fff;
       border-color: #42b983;
-      &::before {
-        content: '';
-        background: #fff;
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        position: relative;
-        margin-right: 2px;
-      }
+    /*  &::before {*/
+    /*    content: '';*/
+    /*    background: #fff;*/
+    /*    display: inline-block;*/
+    /*    width: 8px;*/
+    /*    height: 8px;*/
+    /*    border-radius: 50%;*/
+    /*    position: relative;*/
+    /*    margin-right: 2px;*/
+    /*  }*/
     }
   }
 </style>

src/layout/components/UHeader/index.vue

@@ -15,7 +15,7 @@
         <u-hamburger/>
       </div>
       <div class="right">
-        <el-button type="text" style="margin-right: 10px" @click="toGitHub">Github地址</el-button>
+        <u-info/>
         <u-screen-full/>
         <el-dropdown @command="commandAction">
           <span class="el-dropdown-link">
@@ -43,6 +43,7 @@
   import TagViews from '../TagsView/index.vue'
   import UHamburger from "@/components/u-Hamburger/index.vue"
   import UScreenFull from '@/components/u-screenfull/index.vue'
+  import UInfo from '@/components/u-info/index.vue'
   import MenuSlide from '../Sidebar/menuSlide.vue'
   import {computed, ref,} from 'vue'
   import {useRouter} from 'vue-router'

src/router/index.ts

@@ -58,7 +58,7 @@ const clipboardTable = {
             path: 'index',
             component: () => import('@/views/clipboard/index.vue'),
             name: 'map',
-            meta: { title: 'clipboard', noCache: true , roles:['other'] ,icon: 'document-copy',}
+            meta: { title: '剪贴板', noCache: true , roles:['other'] ,icon: 'document-copy',}
         },
 
     ]

src/router/modules/components.ts

@@ -8,35 +8,11 @@ const componentsRouter = {
     redirect: 'noRedirect',
     name: 'components',
     meta: {
-        title: '组件',
+        title: '基础组件',
         icon: 'Histogram',
         roles:['other']
     },
     children: [
-        {
-            path: 'editor',
-            component: () => import('@/views/components-demo/editor.vue'),
-            name: 'editor',
-            meta: { title: '富文本编辑器', noCache: true, roles:['other'] }
-        },
-        {
-            path: 'mark-down',
-            component: () => import('@/views/components-demo/mark-down.vue'),
-            name: 'mark-down',
-            meta: { title: 'markDown', noCache: true , roles:['other']}
-        },
-        {
-            path: 'form',
-            component: () => import('@/views/components-demo/form.vue'),
-            name: 'form',
-            meta: { title: '表单', noCache: true  , roles:['other']}
-        },
-        {
-            path: 'scroll',
-            component: () => import('@/views/components-demo/scroll.vue'),
-            name: 'scroll',
-            meta: { title: '无限滚动', noCache: true  }
-        },
         {
             path: 'button',
             component: () => import('@/views/components-demo/button.vue'),
@@ -50,11 +26,62 @@ const componentsRouter = {
             meta: { title: '上传图片', noCache: true  }
         },
         {
-            path: 'count',
-            component: () => import('@/views/components-demo/count.vue'),
-            name: 'count',
-            meta: { title: '数字自增长', noCache: true  }
+            path: 'form',
+            component: () => import('@/views/components-demo/form.vue'),
+            name: 'form',
+            meta: { title: '表单', noCache: true  , roles:['other']}
         },
+        {
+            path: 'link',
+            component: () => import('@/views/components-demo/link.vue'),
+            name: 'link',
+            meta: { title: '文字链接', noCache: true  , roles:['other']}
+        },
+        {
+            path: 'radio',
+            component: () => import('@/views/components-demo/radio.vue'),
+            name: 'radio',
+            meta: { title: '单选框', noCache: true  , roles:['other']}
+        },
+        {
+            path: 'checkbox',
+            component: () => import('@/views/components-demo/checkbox.vue'),
+            name: 'checkbox',
+            meta: { title: '多选框', noCache: true  , roles:['other']}
+        },
+        {
+            path: 'input',
+            component: () => import('@/views/components-demo/input.vue'),
+            name: 'input',
+            meta: { title: '输入框', noCache: true  , roles:['other']}
+        },
+        {
+            path: 'inputnumber',
+            component: () => import('@/views/components-demo/inputnumber.vue'),
+            name: 'inputnumber',
+            meta: { title: '数字输入框', noCache: true  , roles:['other']}
+        },
+        {
+            path: 'timepicker',
+            component: () => import('@/views/components-demo/timepicker.vue'),
+            name: 'timepicker',
+            meta: { title: '时间选择器', noCache: true  , roles:['other']}
+        },
+        {
+            path: 'datetimepicker',
+            component: () => import('@/views/components-demo/datetimepicker.vue'),
+            name: 'datetimepicker',
+            meta: { title: '日期时间选择器', noCache: true  , roles:['other']}
+        },
+        {
+            path: 'scroll',
+            component: () => import('@/views/components-demo/scroll.vue'),
+            name: 'scroll',
+            meta: { title: '无限滚动', noCache: true  }
+        },
+
+
+
     ]
 }
 

src/router/modules/other.ts

@@ -12,6 +12,18 @@ const othersRouter = {
         icon: 'management'
     },
     children: [
+        {
+            path: 'editor',
+            component: () => import('@/views/other/editor.vue'),
+            name: 'editor',
+            meta: { title: '富文本编辑器', noCache: true, roles:['other'] }
+        },
+        {
+            path: 'mark-down',
+            component: () => import('@/views/other/mark-down.vue'),
+            name: 'mark-down',
+            meta: { title: 'markDown', noCache: true , roles:['other']}
+        },
         {
             path: 'print',
             component: () => import('@/views/other/print.vue'),
@@ -48,6 +60,12 @@ const othersRouter = {
             name: 'right-menu',
             meta: { title: '右键菜单', noCache: true  }
         },
+        {
+            path: 'count',
+            component: () => import('@/views/other/count.vue'),
+            name: 'count',
+            meta: { title: '数字自增长', noCache: true  }
+        },
     ]
 }
 

src/views/clipboard/index.vue

@@ -1,15 +1,23 @@
 <template>
     <div>
-        <el-input v-model="inputData" placeholder="请输入" style="width:400px;max-width:100%;" />
-        <el-button type="primary" @click="handleCopy(inputData,$event)">
-            <el-icon style="margin-right: 6px"><document-copy /></el-icon> 复制
-        </el-button>
+        <el-card style="margin-bottom: 20px">
+            <div style="margin-bottom: 10px">输入内容，并点击复制按钮</div>
+            <el-input v-model="inputData" placeholder="请输入" style="width:400px;max-width:100%;" />
+            <el-button type="primary" @click="handleCopy(inputData,$event)">
+                <el-icon style="margin-right: 6px"><document-copy /></el-icon> 复制
+            </el-button>
+        </el-card>
+        <el-card>
+            <div style="margin-bottom: 10px">复制成功后可在这粘贴测试</div>
+            <el-input v-model="testValue" placeholder="请输入" style="width:400px;max-width:100%;" />
+        </el-card>
     </div>
 </template>
 <script lang="ts" setup>
     import {ref} from 'vue'
     import clip from '@/utils/clipboard'
     const inputData = ref('https://github.com/zouzhibin/vue-admin-perfect')
+    const testValue = ref('')
 
     const handleCopy = (text, event)=> {
         clip(text, event)

src/views/components-demo/button.vue

@@ -189,6 +189,7 @@ import {
 }
 
 .box-card {
-  width: 100%
+  width: 100%;
+  margin-bottom:20px;
 }
 </style>

src/views/components-demo/checkbox.vue

@@ -0,0 +1,148 @@
+   <template>
+    <div>
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>基础用法
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-checkbox v-model="checked1" label="备选项1" />
+                <el-checkbox v-model="checked2" label="备选项1" />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                <span>禁用状态
+              </span>
+                </div>
+            </template>
+            <div>
+                <el-checkbox v-model="checked1" disabled>备选项11</el-checkbox>
+                <el-checkbox v-model="checked2">备选项2</el-checkbox>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>多选框组
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-checkbox-group v-model="checkList">
+                    <el-checkbox label="备选项 A" />
+                    <el-checkbox label="备选项 B" />
+                    <el-checkbox label="备选项 C" />
+                    <el-checkbox label="禁用" disabled />
+                    <el-checkbox label="选中且禁用" disabled />
+                </el-checkbox-group>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>中间状态
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-checkbox
+                        v-model="checkAll"
+                        :indeterminate="isIndeterminate"
+                        @change="handleCheckAllChange"
+                >全选</el-checkbox
+                >
+                <el-checkbox-group
+                        v-model="checkedCities"
+                        @change="handleCheckedCitiesChange"
+                >
+                    <el-checkbox v-for="city in cities" :key="city" :label="city">{{
+                        city
+                        }}</el-checkbox>
+                </el-checkbox-group>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>按钮样式
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-checkbox-group v-model="checkboxGroup1" >
+                    <el-checkbox-button v-for="city in cities" :key="city" :label="city">
+                        {{ city }}
+                    </el-checkbox-button>
+                </el-checkbox-group>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>带有边框
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-checkbox v-model="checked1" label="备选项1" border />
+                <el-checkbox v-model="checked2" label="备选项2" border />
+            </div>
+        </el-card>
+
+
+    </div>
+</template>
+<script lang="ts" setup>
+    import { ref } from 'vue'
+    const checked1 = ref(false)
+    const checked2 = ref(true)
+    const checkList = ref(['选中且禁用', '备选项 A'])
+    const cities = ['上海', '北京', '广州', '深圳']
+    const checkAll = ref(false)
+    const isIndeterminate = ref(true)
+    const checkedCities = ref(['上海', '北京'])
+    const checkboxGroup1 = ref(['上海'])
+    const handleCheckAllChange = (val: boolean) => {
+        checkedCities.value = val ? cities : []
+        isIndeterminate.value = false
+    }
+    const handleCheckedCitiesChange = (value: string[]) => {
+        const checkedCount = value.length
+        checkAll.value = checkedCount === cities.length
+        isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
+    }
+</script>
+<style>
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .el-link {
+        margin-right: 8px;
+    }
+    .el-link .el-icon--right.el-icon {
+        vertical-align: text-bottom;
+    }
+    .text {
+        font-size: 14px;
+    }
+
+    .item {
+        margin-bottom: 18px;
+    }
+
+    .box-card {
+        width: 100%;
+        margin-bottom:20px;
+    }
+</style>

src/views/components-demo/count.vue

@@ -1,156 +0,0 @@
-<template>
-  <div class="components-container">
-    <count-to ref="example" class="example" :start-val="options.startValInput" :end-val="options.endValInput" :duration="options.durationInput" :decimals="options.decimals"
-               :prefix="options.prefix" :suffix="options.suffix" :autoplay="true" :separator="options.separator"></count-to>
-    <div style="margin-top: 40px;">
-      <label class="label" >起始值:
-        <el-input-number v-model="options.startValInput" @change="(val)=>handleChange(val,'startValInput')" :min="0"  label="描述文字"></el-input-number>
-      </label>
-      <label class="label" >最终值:
-        <el-input-number v-model="options.endValInput" @change="(val)=>handleChange(val,'endValInput')" :min="1"  label="描述文字"></el-input-number>
-      </label>
-      <label class="label" >持续时间:
-        <el-input-number v-model="options.durationInput" @change="(val)=>handleChange(val,'durationInput')" :min="1"  label="描述文字"></el-input-number>
-      </label>
-      <br/>
-      <label class="label" >小数位数:
-        <el-input-number v-model="options.decimals" @change="(val)=>handleChange(val,'decimals')" :min="0"  label="描述文字"></el-input-number>
-      </label>
-      <label class="label" >
-        分隔符:<el-input v-model="options.separator" @change="(val)=>handleChange(val,'prefix')"  style="width: 100px;margin-left: 10px"></el-input>
-      </label>
-      <label class="label" >
-        前缀:<el-input v-model="options.prefix" @change="(val)=>handleChange(val,'prefix')"  style="width: 100px;margin-left: 10px"></el-input>
-      </label>
-      <label class="label" >后缀:
-        <el-input v-model="options.suffix" @change="(val)=>handleChange(val,'suffix')"    style="width: 100px;margin-left: 10px"></el-input>
-      </label>
-
-      <el-button type="primary" @click="start">开始</el-button>
-      <el-button type="danger" @click="pauseResume">暂停/恢复</el-button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import CountTo from '@/components/u-count-to/vue-countTo.vue'
-  const example = ref()
-  import {reactive, ref} from "vue";
-    let options = reactive({
-      startValInput:0,
-      endValInput:9888,
-      durationInput:2000,
-      decimals:1,
-      prefix:'价钱：',
-      suffix:'元',
-      separator:','
-    })
-   const handleChange = (val,type)=>{
-      // switch (type) {
-      //   case 'startValInput':
-      //     break;
-      // }
-   }
-    const start = ()=>{
-      example.value.start()
-    }
-    const pauseResume = ()=>{
-      example.value.pauseResume()
-    }
-
-</script>
-
-<style scoped>
-.example-btn {
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: 500;
-  text-align: center;
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  line-height: 1.5;
-  padding: 4px 15px;
-  font-size: 12px;
-  border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
-  transition: all .3s cubic-bezier(.645, .045, .355, 1);
-  position: relative;
-  color: rgba(0, 0, 0, .65);
-  background-color: #fff;
-  border-color: #d9d9d9;
-}
-
-.example-btn:hover {
-  color: #4AB7BD;
-  background-color: #fff;
-  border-color: #4AB7BD;
-}
-.example {
-  font-size: 50px;
-  color: #F6416C;
-  display: block;
-  margin: 10px 0;
-  text-align: center;
-  font-size: 80px;
-  font-weight: 500;
-}
-
-.label {
-  color: #2f4f4f;
-  font-size: 16px;
-  display: inline-block;
-  margin: 15px 30px 15px 0;
-}
-
-input {
-  position: relative;
-  display: inline-block;
-  padding: 4px 7px;
-  width: 70px;
-  height: 28px;
-  cursor: text;
-  font-size: 12px;
-  line-height: 1.5;
-  color: rgba(0, 0, 0, .65);
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  -webkit-transition: all .3s;
-  transition: all .3s;
-}
-
-.startBtn {
-  margin-left: 20px;
-  font-size: 20px;
-  color: #30B08F;
-  background-color: #fff;
-}
-
-.startBtn:hover {
-  background-color: #30B08F;
-  color: #fff;
-  border-color: #30B08F;
-}
-
-.pause-resume-btn {
-  font-size: 20px;
-  color: #E65D6E;
-  background-color: #fff;
-}
-
-.pause-resume-btn:hover {
-  background-color: #E65D6E;
-  color: #fff;
-  border-color: #E65D6E;
-}
-</style>
-

src/views/components-demo/datetimepicker.vue

@@ -0,0 +1,166 @@
+   <template>
+    <div>
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>日期和时间点
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-date-picker
+                        v-model="value1"
+                        type="datetime"
+                        placeholder="选择日期时间点"
+                />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                <span>日期时间格式
+              </span>
+                </div>
+            </template>
+            <div>
+                <el-date-picker
+                        v-model="value4"
+                        type="datetime"
+                        placeholder="选择时间"
+                        format="YYYY/MM/DD hh:mm:ss"
+                />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>日期和时间范围
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-date-picker
+                        :shortcuts="shortcuts1"
+                        v-model="value3"
+                        type="datetimerange"
+                        range-separator="-"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                />
+            </div>
+        </el-card>
+
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>默认的起始与结束时刻
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-date-picker
+                        v-model="value5"
+                        type="datetimerange"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                        :default-time="defaultTime1"
+                />
+            </div>
+        </el-card>
+
+
+
+
+    </div>
+</template>
+<script lang="ts" setup>
+    import { ref } from 'vue'
+    const value1 = ref('')
+    const value4 = ref('')
+    const value5 = ref('')
+    const defaultTime1 = [new Date(2000, 1, 1, 12, 0, 0)]
+    const value3 = ref([
+        new Date(2000, 10, 10, 10, 10),
+        new Date(2000, 10, 11, 10, 10),
+    ])
+    const shortcuts = [
+        {
+            text: 'Today',
+            value: new Date(),
+        },
+        {
+            text: 'Yesterday',
+            value: () => {
+                const date = new Date()
+                date.setTime(date.getTime() - 3600 * 1000 * 24)
+                return date
+            },
+        },
+        {
+            text: 'A week ago',
+            value: () => {
+                const date = new Date()
+                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+                return date
+            },
+        },
+    ]
+
+    const shortcuts1 = [
+        {
+            text: 'Last week',
+            value: () => {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+                return [start, end]
+            },
+        },
+        {
+            text: 'Last month',
+            value: () => {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+                return [start, end]
+            },
+        },
+        {
+            text: 'Last 3 months',
+            value: () => {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+                return [start, end]
+            },
+        },
+    ]
+</script>
+<style>
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .el-link {
+        margin-right: 8px;
+    }
+    .el-link .el-icon--right.el-icon {
+        vertical-align: text-bottom;
+    }
+    .text {
+        font-size: 14px;
+    }
+
+    .item {
+        margin-bottom: 18px;
+    }
+
+    .box-card {
+        width: 100%;
+        margin-bottom:20px;
+    }
+</style>

src/views/components-demo/input.vue

@@ -0,0 +1,130 @@
+   <template>
+    <div>
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>基础用法
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-input v-model="input" placeholder="请输入内容" />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                <span>禁用状态
+              </span>
+                </div>
+            </template>
+            <div>
+                <el-input v-model="input" disabled placeholder="请输入内容" />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>一键清空
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-input v-model="input" placeholder="请输入内容" clearable />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>格式化
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-input
+                        v-model="input"
+                        placeholder="请输入内容"
+                        :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+                        :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
+                />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>密码框
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-input
+                        v-model="input"
+                        type="password"
+                        placeholder="请输入密码"
+                        show-password
+                />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>带 icon 的输入框
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-input
+                        v-model="input"
+                        placeholder="请输入内容"
+                        :suffix-icon="Calendar"
+                />
+                <el-input
+                        v-model="input2"
+                        placeholder="请输入内容"
+                        :prefix-icon="Search"
+                />
+            </div>
+        </el-card>
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>文本域
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-input
+                        v-model="textarea"
+                        :rows="2"
+                        type="textarea"
+                        placeholder="请输入内容"
+                />
+            </div>
+        </el-card>
+
+    </div>
+</template>
+<script lang="ts" setup>
+    import { ref } from 'vue'
+    import { Calendar, Search } from '@element-plus/icons-vue'
+    const input = ref('')
+    const input2 = ref('')
+    const textarea = ref('')
+
+</script>
+<style>
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .box-card {
+        width: 100%;
+        margin-bottom:20px;
+    }
+</style>

src/views/components-demo/inputnumber.vue

@@ -0,0 +1,116 @@
+   <template>
+    <div>
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>基础用法
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                <span>禁用状态
+              </span>
+                </div>
+            </template>
+            <div>
+                <el-input-number v-model="num" :disabled="true" />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>步进
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-input-number v-model="num" :step="2" />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>严格步进
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-input-number v-model="num" :step="2" step-strictly />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>精度
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-input-number v-model="num" :precision="2" :step="0.1" :max="10" />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>按钮位置
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-input-number
+                        v-model="num"
+                        class="mx-4"
+                        :min="1"
+                        :max="10"
+                        controls-position="right"
+                        @change="handleChange"
+                />
+            </div>
+        </el-card>
+
+
+    </div>
+</template>
+<script lang="ts" setup>
+    import { ref } from 'vue'
+    const num = ref(1)
+    const handleChange = (value: number) => {
+        console.log(value)
+    }
+</script>
+<style>
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .el-link {
+        margin-right: 8px;
+    }
+    .el-link .el-icon--right.el-icon {
+        vertical-align: text-bottom;
+    }
+    .text {
+        font-size: 14px;
+    }
+
+    .item {
+        margin-bottom: 18px;
+    }
+
+    .box-card {
+        width: 100%;
+        margin-bottom:20px;
+    }
+</style>

src/views/components-demo/link.vue

@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+        <span>基础用法
+      </span>
+                </div>
+            </template>
+            <div>
+                <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
+                <el-link type="primary">主要链接</el-link>
+                <el-link type="success">成功链接</el-link>
+                <el-link type="warning">警告链接</el-link>
+                <el-link type="danger">危险链接</el-link>
+                <el-link type="info">信息链接</el-link>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+        <span>禁用状态
+      </span>
+                </div>
+            </template>
+            <div>
+                <el-link disabled>默认链接</el-link>
+                <el-link type="primary" disabled>主要链接</el-link>
+                <el-link type="success" disabled>成功链接</el-link>
+                <el-link type="warning" disabled>警告链接</el-link>
+                <el-link type="danger" disabled>危险链接</el-link>
+                <el-link type="info" disabled>信息链接</el-link>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+              <div class="card-header">
+                    <span>下划线
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-link :underline="false">无下划线</el-link>
+                <el-link>有下划线</el-link>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                  <div class="card-header">
+                    <span>图标
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-link :icon="Edit">编辑</el-link>
+                <el-link>
+                    查看<el-icon class="el-icon--right"><icon-view /></el-icon>
+                </el-link>
+            </div>
+        </el-card>
+
+
+    </div>
+</template>
+<script lang="ts" setup>
+    import { Edit, View as IconView } from '@element-plus/icons-vue'
+</script>
+<style>
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .el-link {
+        margin-right: 8px;
+    }
+    .el-link .el-icon--right.el-icon {
+        vertical-align: text-bottom;
+    }
+    .text {
+        font-size: 14px;
+    }
+
+    .item {
+        margin-bottom: 18px;
+    }
+
+    .box-card {
+        width: 100%;
+        margin-bottom:20px;
+    }
+</style>

src/views/components-demo/radio.vue

@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>基础用法
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-radio v-model="radio4" label="1" >备选项</el-radio>
+                <el-radio v-model="radio4" label="2">备选项1</el-radio>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                <span>禁用状态
+              </span>
+                </div>
+            </template>
+            <div>
+                <el-radio v-model="radio1" disabled label="disabled">备选项 1</el-radio>
+                <el-radio v-model="radio1" disabled label="selected and disabled"
+                >备选项 2</el-radio
+                >
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>单选框组
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-radio-group v-model="radio">
+                    <el-radio :label="3">备选项 1</el-radio>
+                    <el-radio :label="6">备选项 2</el-radio>
+                    <el-radio :label="9">备选项 3</el-radio>
+                </el-radio-group>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>按钮样式
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-radio-group v-model="radio2">
+                    <el-radio-button label="上海" />
+                    <el-radio-button label="北京" />
+                    <el-radio-button label="广州" />
+                    <el-radio-button label="深圳" />
+                </el-radio-group>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>带有边框
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-radio v-model="radio3" label="1" border>备选项1</el-radio>
+                <el-radio v-model="radio3" label="2" border>备选项2</el-radio>
+            </div>
+        </el-card>
+
+
+    </div>
+</template>
+<script lang="ts" setup>
+    import { Edit, View as IconView } from '@element-plus/icons-vue'
+    import { ref } from 'vue'
+
+    const radio = ref(3)
+    const radio1 = ref('selected and disabled')
+    const radio2 = ref('上海')
+    const radio3 = ref('1')
+    const radio4 = ref('1')
+</script>
+<style>
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .el-link {
+        margin-right: 8px;
+    }
+    .el-link .el-icon--right.el-icon {
+        vertical-align: text-bottom;
+    }
+    .text {
+        font-size: 14px;
+    }
+
+    .item {
+        margin-bottom: 18px;
+    }
+
+    .box-card {
+        width: 100%;
+        margin-bottom:20px;
+    }
+</style>

src/views/components-demo/slider.vue

@@ -0,0 +1,148 @@
+   <template>
+    <div>
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>基础用法
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-checkbox v-model="checked1" label="备选项1" />
+                <el-checkbox v-model="checked2" label="备选项1" />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                <span>禁用状态
+              </span>
+                </div>
+            </template>
+            <div>
+                <el-checkbox v-model="checked1" disabled>备选项11</el-checkbox>
+                <el-checkbox v-model="checked2">备选项2</el-checkbox>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>多选框组
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-checkbox-group v-model="checkList">
+                    <el-checkbox label="备选项 A" />
+                    <el-checkbox label="备选项 B" />
+                    <el-checkbox label="备选项 C" />
+                    <el-checkbox label="禁用" disabled />
+                    <el-checkbox label="选中且禁用" disabled />
+                </el-checkbox-group>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>中间状态
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-checkbox
+                        v-model="checkAll"
+                        :indeterminate="isIndeterminate"
+                        @change="handleCheckAllChange"
+                >全选</el-checkbox
+                >
+                <el-checkbox-group
+                        v-model="checkedCities"
+                        @change="handleCheckedCitiesChange"
+                >
+                    <el-checkbox v-for="city in cities" :key="city" :label="city">{{
+                        city
+                        }}</el-checkbox>
+                </el-checkbox-group>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>按钮样式
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-checkbox-group v-model="checkboxGroup1" >
+                    <el-checkbox-button v-for="city in cities" :key="city" :label="city">
+                        {{ city }}
+                    </el-checkbox-button>
+                </el-checkbox-group>
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>带有边框
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-checkbox v-model="checked1" label="备选项1" border />
+                <el-checkbox v-model="checked2" label="备选项2" border />
+            </div>
+        </el-card>
+
+
+    </div>
+</template>
+<script lang="ts" setup>
+    import { ref } from 'vue'
+    const checked1 = ref(false)
+    const checked2 = ref(true)
+    const checkList = ref(['选中且禁用', '备选项 A'])
+    const cities = ['上海', '北京', '广州', '深圳']
+    const checkAll = ref(false)
+    const isIndeterminate = ref(true)
+    const checkedCities = ref(['上海', '北京'])
+    const checkboxGroup1 = ref(['上海'])
+    const handleCheckAllChange = (val: boolean) => {
+        checkedCities.value = val ? cities : []
+        isIndeterminate.value = false
+    }
+    const handleCheckedCitiesChange = (value: string[]) => {
+        const checkedCount = value.length
+        checkAll.value = checkedCount === cities.length
+        isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
+    }
+</script>
+<style>
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .el-link {
+        margin-right: 8px;
+    }
+    .el-link .el-icon--right.el-icon {
+        vertical-align: text-bottom;
+    }
+    .text {
+        font-size: 14px;
+    }
+
+    .item {
+        margin-bottom: 18px;
+    }
+
+    .box-card {
+        width: 100%;
+        margin-bottom:20px;
+    }
+</style>

src/views/components-demo/timepicker.vue

@@ -0,0 +1,109 @@
+   <template>
+    <div>
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>任意时间点
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-time-picker v-model="value4" placeholder="选择时间" />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                <span>限制时间选择范围
+              </span>
+                </div>
+            </template>
+            <div>
+                <el-time-picker
+                        v-model="value1"
+                        :disabled-hours="disabledHours"
+                        :disabled-minutes="disabledMinutes"
+                        :disabled-seconds="disabledSeconds"
+                        placeholder="选择时间"
+                />
+            </div>
+        </el-card>
+
+        <el-card class="box-card">
+            <template #header>
+                <div class="card-header">
+                    <span>任意时间范围
+                  </span>
+                </div>
+            </template>
+            <div>
+                <el-time-picker
+                        v-model="value3"
+                        is-range
+                        range-separator="-"
+                        start-placeholder="开始时间"
+                        end-placeholder="结束时间"
+                />
+            </div>
+        </el-card>
+
+
+
+    </div>
+</template>
+<script lang="ts" setup>
+    import { ref } from 'vue'
+    const value4 = ref()
+    const value1 = ref(new Date(2016, 9, 10, 18, 30))
+    const value3 = ref([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)])
+    const value2 = ref([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)])
+    const makeRange = (start: number, end: number) => {
+        const result: number[] = []
+        for (let i = start; i <= end; i++) {
+            result.push(i)
+        }
+        return result
+    }
+    const disabledHours = () => {
+        return makeRange(0, 16).concat(makeRange(19, 23))
+    }
+    const disabledMinutes = (hour: number) => {
+        if (hour === 17) {
+            return makeRange(0, 29)
+        }
+        if (hour === 18) {
+            return makeRange(31, 59)
+        }
+    }
+    const disabledSeconds = (hour: number, minute: number) => {
+        if (hour === 18 && minute === 30) {
+            return makeRange(1, 59)
+        }
+    }
+</script>
+<style>
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .el-link {
+        margin-right: 8px;
+    }
+    .el-link .el-icon--right.el-icon {
+        vertical-align: text-bottom;
+    }
+    .text {
+        font-size: 14px;
+    }
+
+    .item {
+        margin-bottom: 18px;
+    }
+
+    .box-card {
+        width: 100%;
+        margin-bottom:20px;
+    }
+</style>

src/views/components-demo/upload.vue

@@ -1,11 +1,70 @@
 <template>
     <div>
-        <u-upload @update="update" v-model="imgs"/>
+        <el-card style="margin-bottom: 10px">
+            <template #header>
+                <span>按钮上传</span>
+            </template>
+            <div class="demo-image__preview">
+               <div
+                     class="upload-list"
+                     v-for="item,index in fileList">
+                   <el-image
+                           @click.stop="privew(index)"
+                           style="width: 100%; height: 100%"
+                           :src="item"
+                           :preview-src-list="fileList"
+                           :initial-index="initialIndex"
+                           fit="cover"
+                   />
+               </div>
+            </div>
+            <el-upload action="/" multiple :before-upload="beforeUploadAction">
+                <el-button type="primary">点击上传</el-button>
+            </el-upload>
+        </el-card>
+        <el-card>
+            <template #header>
+                <span>多图片上传</span>
+            </template>
+            <u-upload @update="update" v-model="imgs"/>
+        </el-card>
+
+        <el-card>
+            <template #header>
+                <span>拖拽上传</span>
+            </template>
+            <div
+                    class="upload-list"
+                    v-for="item,index in fileList1">
+                <el-image
+                        @click.stop="privew1(index)"
+                        style="width: 100%; height: 100%"
+                        :src="item"
+                        :preview-src-list="fileList1"
+                        :initial-index="initialIndex1"
+                        fit="cover"
+                />
+            </div>
+            <el-upload
+                    class="upload-demo"
+                    drag
+                    :before-upload="beforeUploadAction1"
+                    action="/"
+                    multiple
+            >
+                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+                <div class="el-upload__text">
+                    拖拽上传 <em>或者点击上传</em>
+                </div>
+            </el-upload>
+        </el-card>
+
     </div>
 </template>
 
 <script setup lang="ts">
     import UUpload from '@/components/u-upload/index.vue'
+    import {ElMessage} from "element-plus";
     import TwoPng from '@/assets/3.png'
     import {reactive, ref} from 'vue'
     const imgs  = ref([{
@@ -14,12 +73,68 @@
         uid:'1651408956803',
         status:'success'
     }])
-
+    const singleimg = ref([])
+    const initialIndex = ref(0)
+    const initialIndex1 = ref(0)
+    const fileList = ref([])
+    const fileList1 = ref([])
     const update = (val)=>{
         console.log('valll======',val)
     }
+    const privew = (index)=>{
+        initialIndex.value = index
+    }
+    const privew1 = (index)=>{
+        initialIndex.value = index
+    }
+    const beforeUploadAction = (file, fileLi)=>{
+        return new Promise((resolve, reject) => {
+            var reader = new FileReader()
+            let reg = (/\.jpg$|\.jpeg$|\.gif$|\.png$/i)
+            reader.readAsDataURL(file)
+            let name = file.name
+            if(reg.test(name)){
+                reader.onload = (e:FileReader)=>{
+                    fileList.value.push(e.target.result)
+                    resolve(e.target.result)
+                }
+            }else{
+                ElMessage.error('请上传图片')
+                reject()
+            }
+        })
+    }
+    const beforeUploadAction1 = (file, fileLi)=>{
+        return new Promise((resolve, reject) => {
+            var reader = new FileReader()
+            let reg = (/\.jpg$|\.jpeg$|\.gif$|\.png$/i)
+            reader.readAsDataURL(file)
+            let name = file.name
+            if(reg.test(name)){
+                reader.onload = (e:FileReader)=>{
+                    fileList1.value.push(e.target.result)
+                    resolve(e.target.result)
+                }
+            }else{
+                ElMessage.error('请上传图片')
+                reject()
+            }
+        })
+    }
 </script>
 
-<style>
+<style scoped>
+.upload-list{
+    overflow: hidden;
+    background-color: #fff;
+    border: 1px solid #c0ccda;
+    border-radius: 6px;
+    box-sizing: border-box;
+    margin: 0 8px 8px 0;
+    padding: 0;
+    width: 146px;
+    height: 146px;
 
+    display: inline-flex;
+}
 </style>

src/views/other/count.vue

@@ -1,11 +1,156 @@
 <template>
+  <div class="components-container">
+    <count-to ref="example" class="example" :start-val="options.startValInput" :end-val="options.endValInput" :duration="options.durationInput" :decimals="options.decimals"
+               :prefix="options.prefix" :suffix="options.suffix" :autoplay="true" :separator="options.separator"></count-to>
+    <div style="margin-top: 40px;">
+      <label class="label" >起始值:
+        <el-input-number v-model="options.startValInput" @change="(val)=>handleChange(val,'startValInput')" :min="0"  label="描述文字"></el-input-number>
+      </label>
+      <label class="label" >最终值:
+        <el-input-number v-model="options.endValInput" @change="(val)=>handleChange(val,'endValInput')" :min="1"  label="描述文字"></el-input-number>
+      </label>
+      <label class="label" >持续时间:
+        <el-input-number v-model="options.durationInput" @change="(val)=>handleChange(val,'durationInput')" :min="1"  label="描述文字"></el-input-number>
+      </label>
+      <br/>
+      <label class="label" >小数位数:
+        <el-input-number v-model="options.decimals" @change="(val)=>handleChange(val,'decimals')" :min="0"  label="描述文字"></el-input-number>
+      </label>
+      <label class="label" >
+        分隔符:<el-input v-model="options.separator" @change="(val)=>handleChange(val,'prefix')"  style="width: 100px;margin-left: 10px"></el-input>
+      </label>
+      <label class="label" >
+        前缀:<el-input v-model="options.prefix" @change="(val)=>handleChange(val,'prefix')"  style="width: 100px;margin-left: 10px"></el-input>
+      </label>
+      <label class="label" >后缀:
+        <el-input v-model="options.suffix" @change="(val)=>handleChange(val,'suffix')"    style="width: 100px;margin-left: 10px"></el-input>
+      </label>
 
+      <el-button type="primary" @click="start">开始</el-button>
+      <el-button type="danger" @click="pauseResume">暂停/恢复</el-button>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
+  import CountTo from '@/components/u-count-to/vue-countTo.vue'
+  const example = ref()
+  import {reactive, ref} from "vue";
+    let options = reactive({
+      startValInput:0,
+      endValInput:9888,
+      durationInput:2000,
+      decimals:1,
+      prefix:'价钱：',
+      suffix:'元',
+      separator:','
+    })
+   const handleChange = (val,type)=>{
+      // switch (type) {
+      //   case 'startValInput':
+      //     break;
+      // }
+   }
+    const start = ()=>{
+      example.value.start()
+    }
+    const pauseResume = ()=>{
+      example.value.pauseResume()
+    }
 
 </script>
 
-<style>
+<style scoped>
+.example-btn {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: 500;
+  text-align: center;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  line-height: 1.5;
+  padding: 4px 15px;
+  font-size: 12px;
+  border-radius: 4px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
+  transition: all .3s cubic-bezier(.645, .045, .355, 1);
+  position: relative;
+  color: rgba(0, 0, 0, .65);
+  background-color: #fff;
+  border-color: #d9d9d9;
+}
+
+.example-btn:hover {
+  color: #4AB7BD;
+  background-color: #fff;
+  border-color: #4AB7BD;
+}
+.example {
+  font-size: 50px;
+  color: #F6416C;
+  display: block;
+  margin: 10px 0;
+  text-align: center;
+  font-size: 80px;
+  font-weight: 500;
+}
+
+.label {
+  color: #2f4f4f;
+  font-size: 16px;
+  display: inline-block;
+  margin: 15px 30px 15px 0;
+}
+
+input {
+  position: relative;
+  display: inline-block;
+  padding: 4px 7px;
+  width: 70px;
+  height: 28px;
+  cursor: text;
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, .65);
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+}
+
+.startBtn {
+  margin-left: 20px;
+  font-size: 20px;
+  color: #30B08F;
+  background-color: #fff;
+}
+
+.startBtn:hover {
+  background-color: #30B08F;
+  color: #fff;
+  border-color: #30B08F;
+}
+
+.pause-resume-btn {
+  font-size: 20px;
+  color: #E65D6E;
+  background-color: #fff;
+}
+
+.pause-resume-btn:hover {
+  background-color: #E65D6E;
+  color: #fff;
+  border-color: #E65D6E;
+}
+</style>
 
-</style>