@opentiny/vue-docs 2.2.20 → 2.2.21

package/demos/pc/app/slide-bar/custom-tag-composition-api.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="demo-slide-bar-tag">
-    <tiny-slide-bar v-model="list" :init-blocks="initBlocks" tag="div" sub-tag="div"></tiny-slide-bar>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { SlideBar as TinySlideBar } from '@opentiny/vue'
-
-const initBlocks = ref(4)
-const list = ref([
-  { title: 'a', lang: 'en_US' },
-  { title: 'b', lang: 'zh-CN' },
-  { title: 'c', lang: 'en_US' },
-  { title: 'd', lang: 'en_US' },
-  { title: 'e', lang: 'en_US' },
-  { title: 'f', lang: 'en_US' },
-  { title: 'g', lang: 'en_US' },
-  { title: 'h', lang: 'en_US' },
-  { title: 'i', lang: 'en_US' }
-])
-</script>
-
-<style>
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div li div {
-  margin: 15px 0;
-  font-size: 12px;
-  color: #4e5e67;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div li div:nth-child(2) {
-  border-bottom: 1px solid #ebebeb;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar div div div svg {
-  float: right;
-  margin: -6px 0 0 0;
-  background: #fff;
-  fill: #ebebeb;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div {
-  width: 23%;
-  padding: 20px;
-  float: left;
-  margin-left: 2%;
-  position: relative;
-  border: 5px solid #fff;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div:first-child {
-  margin-left: 0;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div:hover {
-  border-color: rgba(153, 153, 153, 0.7);
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div > .icon-chevron-down {
-  position: absolute;
-  top: 98.8%;
-  left: 50%;
-  margin-left: -10px;
-  font-size: 2em;
-  width: 22px;
-  display: none !important;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div > .icon-chevron-down:before {
-  content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-right: 5px solid rgba(153, 153, 153, 0.7);
-  border-bottom: 5px solid rgba(153, 153, 153, 0.7);
-  transform: rotate(45deg);
-  background: #fff;
-  top: -5px;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div.tiny-slide-bar__select {
-  border-color: rgba(153, 153, 153, 0.7);
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div.tiny-slide-bar__select div .tiny-icon {
-  color: rgba(153, 153, 153, 0.7);
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div.tiny-slide-bar__select div:nth-child(2) {
-  border-bottom: 1px solid rgba(153, 153, 153, 0.7);
-}
-</style>

package/demos/pc/app/slide-bar/custom-tag.spec.ts

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义 DOM 标签', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slide-bar#custom-tag')
-  const slideBarContainer = page.locator('.tiny-slide-bar__content')
-  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
-  // 自定义的标签为 div
-  await expect(slideBarList.locator('li').first().locator('div')).toHaveCount(3)
-})

package/demos/pc/app/slide-bar/custom-tag.vue

@@ -1,101 +0,0 @@
-<template>
-  <div class="demo-slide-bar-tag">
-    <tiny-slide-bar v-model="list" :init-blocks="initBlocks" tag="div" sub-tag="div"></tiny-slide-bar>
-  </div>
-</template>
-
-<script lang="jsx">
-import { SlideBar } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlideBar: SlideBar
-  },
-  data() {
-    return {
-      initBlocks: 4,
-      list: [
-        { title: 'a', lang: 'en_US' },
-        { title: 'b', lang: 'zh-CN' },
-        { title: 'c', lang: 'en_US' },
-        { title: 'd', lang: 'en_US' },
-        { title: 'e', lang: 'en_US' },
-        { title: 'f', lang: 'en_US' },
-        { title: 'g', lang: 'en_US' },
-        { title: 'h', lang: 'en_US' },
-        { title: 'i', lang: 'en_US' }
-      ]
-    }
-  }
-}
-</script>
-
-<style>
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div li div {
-  margin: 15px 0;
-  font-size: 12px;
-  color: #4e5e67;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div li div:nth-child(2) {
-  border-bottom: 1px solid #ebebeb;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar div div div svg {
-  float: right;
-  margin: -6px 0 0 0;
-  background: #fff;
-  fill: #ebebeb;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div {
-  width: 23%;
-  padding: 20px;
-  float: left;
-  margin-left: 2%;
-  position: relative;
-  border: 5px solid #fff;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div:first-child {
-  margin-left: 0;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div:hover {
-  border-color: rgba(153, 153, 153, 0.7);
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div > .icon-chevron-down {
-  position: absolute;
-  top: 98.8%;
-  left: 50%;
-  margin-left: -10px;
-  font-size: 2em;
-  width: 22px;
-  display: none !important;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div > .icon-chevron-down:before {
-  content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-right: 5px solid rgba(153, 153, 153, 0.7);
-  border-bottom: 5px solid rgba(153, 153, 153, 0.7);
-  transform: rotate(45deg);
-  background: #fff;
-  top: -5px;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div.tiny-slide-bar__select {
-  border-color: rgba(153, 153, 153, 0.7);
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div.tiny-slide-bar__select div .tiny-icon {
-  color: rgba(153, 153, 153, 0.7);
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div.tiny-slide-bar__select div:nth-child(2) {
-  border-bottom: 1px solid rgba(153, 153, 153, 0.7);
-}
-</style>

package/demos/pc/app/slide-bar/slide-bar-events-composition-api.vue

@@ -1,37 +0,0 @@
-<template>
-  <tiny-slide-bar
-    v-model="list"
-    :init-blocks="initBlocks"
-    @click="handleClick"
-    @before-click="beforeClick"
-  ></tiny-slide-bar>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { SlideBar as TinySlideBar, Modal } from '@opentiny/vue'
-
-const initBlocks = ref(4)
-const list = ref([
-  { title: 'a', lang: 'en_US' },
-  { title: 'b', lang: 'zh-CN' },
-  { title: 'c', lang: 'en_US' },
-  { title: 'd', lang: 'en_US' },
-  { title: 'e', lang: 'en_US' },
-  { title: 'f', lang: 'en_US' },
-  { title: 'g', lang: 'en_US' },
-  { title: 'h', lang: 'en_US' },
-  { title: 'i', lang: 'en_US' }
-])
-
-function handleClick(data, index) {
-  Modal.message({
-    message: `click 事件，回调参数：${data.title}, ${index}`,
-    status: 'info'
-  })
-}
-
-function beforeClick() {
-  Modal.message({ message: 'before-click 事件', status: 'info' })
-}
-</script>

package/demos/pc/app/slide-bar/slide-bar-events.spec.ts

@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('滚动块事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slide-bar#slide-bar-events')
-  const slideBarContainer = page.locator('.tiny-slide-bar__content')
-  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
-  await slideBarList.locator('li').first().click()
-  await expect(page.locator('.tiny-modal').filter({ hasText: 'before-click 事件' })).toBeVisible()
-  await expect(page.locator('.tiny-modal').filter({ hasText: 'click 事件，回调参数：' })).toBeVisible()
-})

package/demos/pc/app/slide-bar/slide-bar-events.vue

@@ -1,45 +0,0 @@
-<template>
-  <tiny-slide-bar
-    v-model="list"
-    :init-blocks="initBlocks"
-    @click="handleClick"
-    @before-click="beforeClick"
-  ></tiny-slide-bar>
-</template>
-
-<script lang="jsx">
-import { SlideBar, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlideBar: SlideBar
-  },
-  data() {
-    return {
-      initBlocks: 4,
-      list: [
-        { title: 'a', lang: 'en_US' },
-        { title: 'b', lang: 'zh-CN' },
-        { title: 'c', lang: 'en_US' },
-        { title: 'd', lang: 'en_US' },
-        { title: 'e', lang: 'en_US' },
-        { title: 'f', lang: 'en_US' },
-        { title: 'g', lang: 'en_US' },
-        { title: 'h', lang: 'en_US' },
-        { title: 'i', lang: 'en_US' }
-      ]
-    }
-  },
-  methods: {
-    handleClick(data, index) {
-      Modal.message({
-        message: `click 事件，回调参数：${data.title}, ${index}`,
-        status: 'info'
-      })
-    },
-    beforeClick() {
-      Modal.message({ message: 'before-click 事件', status: 'info' })
-    }
-  }
-}
-</script>

package/demos/pc/app/slide-bar/webdoc/slide-bar.cn.md

@@ -1,7 +0,0 @@
----
-title: SlideBar 滚动块
----
-
-# SlideBar 滚动块
-
-<div>SlideBar 滚动块，可以用作文字块的滑动。</div>

package/demos/pc/app/slide-bar/webdoc/slide-bar.en.md

@@ -1,7 +0,0 @@
----
-title: SlideBar Scrolling Block
----
-
-# SlideBar Scrolling Block
-
-<div>SlideBar scroll block, which can be used as a sliding block of text.</div>

package/demos/pc/app/slide-bar/webdoc/slide-bar.js

@@ -1,72 +0,0 @@
-export default {
-  column: '2',
-  owner: '',
-  metaData: {
-    deprecated: '3.12.0',
-    removed: '3.15.0'
-  },
-  demos: [
-    {
-      demoId: 'basic-usage',
-      name: {
-        'zh-CN': '基本用法',
-        'en-US': 'Basic Usage'
-      },
-      desc: {
-        'zh-CN': '通过<code>:init-blocks="4"</code>设置可显示的块数。',
-        'en-US': 'Set the number of blocks that can be displayed through<code>: init blocks="4"</code>.'
-      },
-      codeFiles: ['basic-usage.vue']
-    },
-    {
-      demoId: 'wheel-blocks',
-      name: {
-        'zh-CN': '每次滚动块数',
-        'en-US': 'Number of blocks scrolled each time'
-      },
-      desc: {
-        'zh-CN':
-          '<p>通过 <code>wheel-blocks</code> 设置每次滚动块数。\n通过 <code>value</code> 调用服务时候获取数据的来源。</p>\n',
-        'en-US':
-          '<p>You can use <code>wheel-blocks</code> to set the number of blocks to be scrolled each time. \nThe data source can be obtained when the service is invoked through <code>value</code>. </p>\n'
-      },
-      codeFiles: ['wheel-blocks.vue']
-    },
-    {
-      demoId: 'custom-content',
-      name: {
-        'zh-CN': '自定义滚动块内容',
-        'en-US': 'Custom Scroll Block Content'
-      },
-      desc: {
-        'zh-CN': '<p>通过插槽自定义滚动块内容。</p>\n',
-        'en-US': '<p>Customize the scroll block content by slot. </p>\n'
-      },
-      codeFiles: ['custom-content.vue']
-    },
-    {
-      demoId: 'custom-tag',
-      name: {
-        'zh-CN': '自定义 DOM 标签',
-        'en-US': 'Customized DOM Label'
-      },
-      desc: {
-        'zh-CN': '<p>通过 <code>tag sub-tag</code> 自定义 DOM 标签。</p>\n',
-        'en-US': '<p>You can use <code>tag sub-tag</code> to customize DOM tags. </p>\n'
-      },
-      codeFiles: ['custom-tag.vue']
-    },
-    {
-      demoId: 'slide-bar-events',
-      name: {
-        'zh-CN': '滚动块事件',
-        'en-US': 'Scroll Block Event'
-      },
-      desc: {
-        'zh-CN': '通过<code>@before-click</code>触发滑动点击前事件。',
-        'en-US': 'Trigger the pre click event by<code>@ before click</code>.'
-      },
-      codeFiles: ['slide-bar-events.vue']
-    }
-  ]
-}

package/demos/pc/app/slide-bar/wheel-blocks-composition-api.vue

@@ -1,21 +0,0 @@
-<template>
-  <tiny-slide-bar v-model="value" :init-blocks="initBlocks" :wheel-blocks="2"></tiny-slide-bar>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { SlideBar as TinySlideBar } from '@opentiny/vue'
-
-const initBlocks = ref(4)
-const value = ref([
-  { title: 'a', lang: 'en_US' },
-  { title: 'b', lang: 'zh-CN' },
-  { title: 'c', lang: 'en_US' },
-  { title: 'd', lang: 'en_US' },
-  { title: 'e', lang: 'en_US' },
-  { title: 'f', lang: 'en_US' },
-  { title: 'g', lang: 'en_US' },
-  { title: 'h', lang: 'en_US' },
-  { title: 'i', lang: 'en_US' }
-])
-</script>

package/demos/pc/app/slide-bar/wheel-blocks.spec.ts

@@ -1,13 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('每次滚动块数', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slide-bar#wheel-blocks')
-  const slideBarContainer = page.locator('.tiny-slide-bar__content')
-  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
-
-  await slideBarList.first().click()
-  // 单个滚动块的宽度固定为196px，所以应为 196px * 2
-  await page.mouse.wheel(0, 50)
-  await page.pause()
-})

package/demos/pc/app/slide-bar/wheel-blocks.vue

@@ -1,29 +0,0 @@
-<template>
-  <tiny-slide-bar v-model="value" :init-blocks="initBlocks" :wheel-blocks="2"></tiny-slide-bar>
-</template>
-
-<script lang="jsx">
-import { SlideBar } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlideBar: SlideBar
-  },
-  data() {
-    return {
-      initBlocks: 4,
-      value: [
-        { title: 'a', lang: 'en_US' },
-        { title: 'b', lang: 'zh-CN' },
-        { title: 'c', lang: 'en_US' },
-        { title: 'd', lang: 'en_US' },
-        { title: 'e', lang: 'en_US' },
-        { title: 'f', lang: 'en_US' },
-        { title: 'g', lang: 'en_US' },
-        { title: 'h', lang: 'en_US' },
-        { title: 'i', lang: 'en_US' }
-      ]
-    }
-  }
-}
-</script>

package/demos/pc/overviewimage/credit-card-form.svg

@@ -1,91 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>CreditCardForm 信用卡表单</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.4921021%" y1="86.8386573%" x2="123.541555%" y2="-43.8247114%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.5523497%" x2="128.792906%" y2="48.5932155%" id="linearGradient-10">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.3380666%" x2="128.792906%" y2="46.5920661%" id="linearGradient-11">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <path d="M2.48008033,33 L45.50385,33 C46.869769,33 47.9839304,31.7858995 47.9839304,30.2883307 L47.9839304,12.8790924 L0,12.8790924 L0,30.2883307 C0,31.7858995 1.11416135,33 2.48008033,33 Z M45.5145631,0 L2.49079343,0 C1.11416135,0 0.0107130966,1.21410051 0.0107130966,2.71166934 L0.0107130966,8.14035656 L48,8.14035656 L48,2.7063209 C47.9946435,1.21410051 46.8804821,0 45.5145631,0 Z" id="path-12"></path>
-        <filter x="-8.3%" y="-6.1%" width="116.7%" height="124.2%" filterUnits="objectBoundingBox" id="filter-13">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1478.000000, -2255.000000)">
-            <g id="编组-14备份-13" transform="translate(1380.000000, 2225.000000)">
-                <g id="CreditCardForm-信用卡表单" transform="translate(98.000000, 30.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-15" transform="translate(28.500000, 33.000000)" opacity="0.204287574">
-                        <path d="M4,0 L12.2725011,0 L12.2725011,0 L53,0 C55.209139,-8.25425059e-15 57,1.790861 57,4 L57,55 C57,57.209139 55.209139,59 53,59 L4,59 C1.790861,59 3.75067146e-15,57.209139 0,55 L0,4 C-1.15871992e-15,1.790861 1.790861,-3.82769592e-17 4,0 Z" id="矩形" fill="url(#linearGradient-9)"></path>
-                        <rect id="矩形备份-6" fill="url(#linearGradient-10)" x="8.5" y="25" width="49" height="6" rx="3"></rect>
-                        <rect id="矩形备份-20" fill="url(#linearGradient-10)" x="8.5" y="39" width="49" height="6" rx="3"></rect>
-                        <rect id="矩形备份-21" fill="url(#linearGradient-11)" x="8.5" y="11" width="31.4821429" height="6" rx="3"></rect>
-                    </g>
-                    <g id="编组-24" transform="translate(49.000000, 47.000000)">
-                        <path d="M2.4809109,33 L45.5190891,33 C46.8854655,33 48,31.0087719 48,28.5526316 L48,4 C48,1.790861 46.209139,-4.05812251e-16 44,0 L4,0 C1.790861,4.05812251e-16 -2.705415e-16,1.790861 0,4 L0,28.5526316 L0,28.5526316 C0,31.008772 1.11453448,33 2.4809109,33 Z" id="路径" fill="#C8D4F8"></path>
-                        <g id="信用卡">
-                            <g id="形状">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
-                            </g>
-                            <path d="M28.1663877,22.0896272 C28.1663877,21.715235 28.4449281,21.4103728 28.7877469,21.4103728 L43.0575829,21.4103728 C43.4004017,21.4103728 43.6735856,21.715235 43.6735856,22.0896272 L43.6735856,26.1544571 C43.6735856,26.5288493 43.3950452,26.8337115 43.0575829,26.8337115 L28.7931035,26.8337115 C28.4502846,26.8337115 28.1717442,26.5288493 28.1717442,26.1544571 L28.1717442,22.0896272 L28.1663877,22.0896272 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

package/demos/pc/overviewimage/detail-page.svg

@@ -1,90 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>DetailPage 表头详情栏</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="69.9170941%" x2="128.792906%" y2="-0.727028245%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.4618639%" y1="86.8386573%" x2="123.945296%" y2="-43.8247114%" id="linearGradient-10">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.4876835%" x2="128.792906%" y2="41.1171871%" id="linearGradient-11">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.4735463%" x2="128.792906%" y2="46.2470115%" id="linearGradient-12">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <path d="M2,0 L66,0 C67.1045695,-2.02906125e-16 68,0.8954305 68,2 L68,16 C68,17.1045695 67.1045695,18 66,18 L2,18 C0.8954305,18 9.09629973e-13,17.1045695 9.09494702e-13,16 L9.09494702e-13,2 C9.09359431e-13,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="path-13"></path>
-        <filter x="-5.9%" y="-11.1%" width="111.8%" height="144.4%" filterUnits="objectBoundingBox" id="filter-14">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-694.000000, -2530.000000)">
-            <g id="编组-14备份-15" transform="translate(596.000000, 2500.000000)">
-                <g id="DetailPage-表头详情栏" transform="translate(98.000000, 30.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-3" transform="translate(33.000000, 38.000000)">
-                        <rect id="矩形备份-23" fill="url(#linearGradient-9)" opacity="0.204287574" x="0" y="2" width="68" height="50" rx="4"></rect>
-                        <rect id="矩形备份-6" fill="url(#linearGradient-10)" opacity="0.303770519" x="31.09375" y="9" width="33.90625" height="35" rx="4"></rect>
-                        <path d="M40,25 L49,25 C50.1045695,25 51,25.8954305 51,27 C51,28.1045695 50.1045695,29 49,29 L40,29 C38.8954305,29 38,28.1045695 38,27 C38,25.8954305 38.8954305,25 40,25 Z" id="形状结合备份" fill="url(#linearGradient-11)" opacity="0.604724702"></path>
-                        <path d="M40,33 L56,33 C57.1045695,33 58,33.8954305 58,35 C58,36.1045695 57.1045695,37 56,37 L40,37 C38.8954305,37 38,36.1045695 38,35 C38,33.8954305 38.8954305,33 40,33 Z" id="形状结合备份-24" fill="url(#linearGradient-12)" opacity="0.604724702"></path>
-                        <g id="形状结合备份">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-13"></use>
-                        </g>
-                        <path d="M61.9514373,8.10859412 C61.9004816,7.82946044 61.627756,7.54532672 61.344878,7.48244438 L61.1333662,7.43468367 C60.6364074,7.28629733 60.195507,6.96190294 59.9151803,6.48413954 C59.6348361,6.00384141 59.5685374,5.45814356 59.6908768,4.95779321 L59.7571579,4.76162879 C59.8412453,4.49004724 59.7316448,4.11539212 59.5099629,3.92927985 C59.5099629,3.92927985 59.3111548,3.76332395 58.7504839,3.44396432 C58.1897953,3.12712207 57.9476854,3.03911805 57.9476854,3.03911805 C57.6749775,2.94106188 57.2927218,3.03410065 57.0939313,3.24281723 L56.9460788,3.39872098 C56.5689082,3.75077179 56.0617443,3.96450576 55.5011085,3.96450576 C54.9404727,3.96450576 54.4282238,3.74828914 54.0510004,3.39370359 L53.9082329,3.24279987 C53.7119937,3.03410065 53.3272043,2.9410966 53.0544788,3.03911805 C53.0544788,3.03911805 52.8098352,3.12712207 52.2491466,3.44394696 C51.6884581,3.76582397 51.4922365,3.93177987 51.4922365,3.93177987 C51.270537,4.1153574 51.1609365,4.4875125 51.2450415,4.76161143 L51.3062552,4.96025851 C51.4260257,5.46064357 51.3622959,6.00384141 51.0819517,6.48408746 C50.8016074,6.96433351 50.3557451,7.29133208 49.8562878,7.43720105 L49.6524123,7.48244438 C49.372068,7.54532672 49.0968088,7.82696042 49.0458531,8.10859412 C49.0458531,8.10859412 49,8.36003666 49,8.99875593 C49,9.63747519 49.0458531,9.88891773 49.0458531,9.88891773 C49.0968088,10.1705514 49.3695167,10.4521851 49.6524123,10.5150675 L49.8512204,10.5603108 C50.3507129,10.7061971 50.7992496,11.0330915 51.0795939,11.5158723 C51.3599382,11.9961878 51.4262369,12.5418683 51.3038975,13.042236 L51.2453055,13.2358657 C51.161218,13.5074473 51.2708185,13.8821024 51.4924828,14.0682146 C51.4924828,14.0682146 51.6912909,14.2341705 52.2519619,14.5535302 C52.8126328,14.8728898 53.0547427,14.9583764 53.0547427,14.9583764 C53.3274507,15.0564153 53.7097063,14.9633938 53.9084969,14.7546773 L54.0486602,14.6062909 C54.4283469,14.2517227 54.9380798,14.0354887 55.5013196,14.0354887 C56.0645595,14.0354887 56.5767557,14.2542401 56.9539791,14.6087909 L57.0941424,14.7571773 C57.2903817,14.9658765 57.675171,15.0589674 57.9478966,14.9608591 C57.9478966,14.9608591 58.1925402,14.8728551 58.7532287,14.5560302 C59.3139173,14.2366532 59.5101389,14.0707147 59.5101389,14.0707147 C59.7318384,13.8871371 59.8414389,13.512482 59.7573162,13.2383657 L59.6961025,13.0371839 C59.576332,12.5393162 59.6400618,11.9961357 59.9204061,11.518355 C60.2007504,11.0380395 60.6492695,10.7086624 61.1487796,10.5627935 L61.3475877,10.5175501 C61.627932,10.4546678 61.9031912,10.1730341 61.9541469,9.89140039 C61.9541469,9.89140039 62,9.63995785 62,9.00123858 C61.9973255,8.35996722 61.9514549,8.10850732 61.9514549,8.10850732 L61.9514373,8.10859412 Z M55.5012669,11.5561156 C54.0715515,11.5561156 52.9094416,10.4119939 52.9094416,8.99875593 C52.9094416,7.58805268 54.0689826,6.44389624 55.5012669,6.44389624 C56.9309822,6.44389624 58.0930921,7.58801796 58.0930921,9.00125594 C58.090488,10.4119592 56.930947,11.5561156 55.5012669,11.5561156 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>