element-whale-ui 0.0.0-beta.0

package/README.md

@@ -0,0 +1,70 @@
+# ShimmerUI
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+pnpm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+pnpm build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+pnpm test:unit
+```
+
+### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
+
+```sh
+pnpm test:e2e:dev
+```
+
+This runs the end-to-end tests against the Vite development server.
+It is much faster than the production build.
+
+But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
+
+```sh
+pnpm build
+pnpm test:e2e
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+pnpm lint
+```

package/element-whale-ui/element-whale-ui.css

@@ -0,0 +1,2 @@
+.counter[data-v-c63c3e32]{font-weight:800}.number-tabular[data-v-c63c3e32]{font-family:Courier New,SF Mono,Consolas,monospace}.number-modern[data-v-c63c3e32]{font-family:Inter,Roboto,Helvetica Neue,Arial,sans-serif}
+/*$vite$:1*/

package/element-whale-ui/element-whale-ui.es.js

@@ -0,0 +1,65 @@
+import { computed as e, createElementBlock as t, defineComponent as n, onMounted as r, onUnmounted as i, openBlock as a, ref as o, toDisplayString as s, watch as c } from "vue";
+//#region src/packages/roll-number/src/index.vue?vue&type=script&setup=true&lang.ts
+var l = { class: "counter number-tabular number-modern" }, u = /* @__PURE__ */ ((e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+})(/* @__PURE__ */ n({
+	__name: "index",
+	props: {
+		value: { default: 0 },
+		duration: { default: 1200 },
+		easing: { default: "easeOutQuad" },
+		thousandsSeparator: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(n) {
+		let u = n, d = o(0), f = null, p = null, m = 0, h = {
+			linear: (e) => e,
+			easeOutQuad: (e) => e * (2 - e),
+			easeOutCubic: (e) => --e * e * e + 1
+		};
+		function g(e) {
+			p ||= e;
+			let t = Math.min((e - p) / u.duration, 1), n = h[u.easing], r = n(t);
+			d.value = m + (u.value - m) * r, t < 1 ? f = requestAnimationFrame(g) : (d.value = u.value, f = null);
+		}
+		function _() {
+			f && cancelAnimationFrame(f), p = null, m = d.value, f = requestAnimationFrame(g);
+		}
+		function v(e) {
+			let t = e.toString(), n = t.indexOf(".");
+			return n === -1 ? 0 : t.length - n - 1;
+		}
+		function y(e) {
+			let t = e.indexOf(".");
+			if (t === -1) return e;
+			let n = e.length;
+			for (; n > t + 1 && e.charAt(n - 1) === "0";) n--;
+			return e.slice(0, n);
+		}
+		let b = e(() => {
+			let e = v(u.value), t = y(d.value.toFixed(e));
+			if (u.thousandsSeparator) {
+				let e = t.split(".");
+				return e[0] = e[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","), e.join(".");
+			}
+			return t;
+		});
+		return c([
+			() => u.value,
+			() => u.duration,
+			() => u.easing
+		], () => {
+			_();
+		}), r(() => {
+			_();
+		}), i(() => {
+			f && cancelAnimationFrame(f);
+		}), (e, n) => (a(), t("div", l, s(b.value), 1));
+	}
+}), [["__scopeId", "data-v-c63c3e32"]]);
+//#endregion
+export { u as RollNumber };

package/element-whale-ui/element-whale-ui.umd.js

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ElementWhaleUI={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n={class:`counter number-tabular number-modern`};e.RollNumber=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`index`,props:{value:{default:0},duration:{default:1200},easing:{default:`easeOutQuad`},thousandsSeparator:{type:Boolean,default:!1}},setup(e){let r=e,i=(0,t.ref)(0),a=null,o=null,s=0,c={linear:e=>e,easeOutQuad:e=>e*(2-e),easeOutCubic:e=>--e*e*e+1};function l(e){o||=e;let t=Math.min((e-o)/r.duration,1),n=c[r.easing],u=n(t);i.value=s+(r.value-s)*u,t<1?a=requestAnimationFrame(l):(i.value=r.value,a=null)}function u(){a&&cancelAnimationFrame(a),o=null,s=i.value,a=requestAnimationFrame(l)}function d(e){let t=e.toString(),n=t.indexOf(`.`);return n===-1?0:t.length-n-1}function f(e){let t=e.indexOf(`.`);if(t===-1)return e;let n=e.length;for(;n>t+1&&e.charAt(n-1)===`0`;)n--;return e.slice(0,n)}let p=(0,t.computed)(()=>{let e=d(r.value),t=f(i.value.toFixed(e));if(r.thousandsSeparator){let e=t.split(`.`);return e[0]=e[0].replace(/\B(?=(\d{3})+(?!\d))/g,`,`),e.join(`.`)}return t});return(0,t.watch)([()=>r.value,()=>r.duration,()=>r.easing],()=>{u()}),(0,t.onMounted)(()=>{u()}),(0,t.onUnmounted)(()=>{a&&cancelAnimationFrame(a)}),(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,n,(0,t.toDisplayString)(p.value),1))}}),[[`__scopeId`,`data-v-c63c3e32`]])});

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "element-whale-ui",
+  "type": "module",
+  "version": "0.0.0-beta.0",
+  "private": false,
+  "description": "A Vue 3 UI component library",
+  "main": "./element-whale-ui/element-whale-ui.umd.js",
+  "module": "./element-whale-ui/element-whale-ui.es.js",
+  "types": "./element-whale-ui/packages/index.d.ts",
+  "files": [
+    "element-whale-ui",
+    "src/packages"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "build:lib": "vite build",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "prepare": "husky",
+    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "run-s lint:*",
+    "lint:eslint": "eslint . --fix --cache",
+    "lint:style": "stylelint \"**/*.{vue,css,scss}\" --fix",
+    "format": "prettier --write --experimental-cli src/"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "dompurify": "^3.4.7",
+    "element-plus": "^2.14.0",
+    "highlight.js": "^11.11.1",
+    "marked": "^18.0.4",
+    "marked-highlight": "^2.2.4",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.32",
+    "vue-router": "^5.0.4",
+    "vuejs-code-block": "^1.0.1"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^9.0.0",
+    "@stylelint/postcss-css-in-js": "^0.38.0",
+    "@tsconfig/node24": "^24.0.4",
+    "@types/jsdom": "^28.0.1",
+    "@types/node": "^24.12.2",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
+    "@vitest/eslint-plugin": "^1.6.16",
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.9.1",
+    "cypress": "^15.14.0",
+    "eslint": "^10.2.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-cypress": "^6.3.1",
+    "eslint-plugin-oxlint": "~1.60.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-vue": "~10.8.0",
+    "husky": "^9.1.7",
+    "jiti": "^2.6.1",
+    "jsdom": "^29.0.2",
+    "lint-staged": "^17.0.4",
+    "npm-run-all2": "^8.0.4",
+    "oxlint": "~1.60.0",
+    "pinia-plugin-persistedstate": "^4.7.1",
+    "prettier": "3.8.3",
+    "sass": "^1.99.0",
+    "start-server-and-test": "^2.1.5",
+    "stylelint": "^17.11.0",
+    "stylelint-config-recommended-vue": "^1.6.1",
+    "stylelint-prettier": "^5.0.3",
+    "typescript": "~6.0.0",
+    "unplugin-auto-import": "^21.0.0",
+    "vite": "^8.0.8",
+    "vite-plugin-vue-devtools": "^8.1.1",
+    "vitepress": "^1.6.4",
+    "vitest": "^4.1.4",
+    "vue-tsc": "^3.2.6"
+  }
+}

package/src/packages/dk-tooltip-collapse/index.ts

@@ -0,0 +1,6 @@
+import DkTooltipCollapse from './src/index.vue'
+
+DkTooltipCollapse.install = function (Vue: any) {
+  Vue.component('DkTooltipCollapse', DkTooltipCollapse)
+}
+export default DkTooltipCollapse

package/src/packages/dk-tooltip-collapse/src/index.vue

@@ -0,0 +1,408 @@
+<script setup lang="ts">
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, useSlots } from 'vue'
+
+const props = withDefaults(defineProps<Props>(), {
+  text: '',
+  width: '',
+  placement: 'top',
+  tooltipContent: '',
+  effect: 'dark',
+  disabled: undefined,
+  tooltip: true,
+  lineClamp: 1,
+  lineHeight: '20px',
+  tooltipMaxWidth: '90%',
+  toggleBg: '',
+  toggleHoverBg: '',
+  tooltipLineClamp: 0,
+})
+/** 折叠状态，true为收起状态 */
+const isCollapsed = defineModel('isCollapsed', { type: Boolean, default: true })
+/** 组件属性接口 */
+interface Props {
+  /** 显示的文本内容 */
+  text?: string
+  /** 容器最小宽度 */
+  width?: string
+  /** tooltip弹出位置 */
+  placement?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+  /** tooltip提示内容，不设置则使用text */
+  tooltipContent?: string
+  /** tooltip最大宽度 */
+  tooltipMaxWidth?: string
+  /** tooltip主题色 */
+  effect?: 'dark' | 'light'
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否使用tooltip模式，false则使用折叠模式 */
+  tooltip?: boolean
+  /** 折叠模式显示的最大行数 */
+  lineClamp?: number
+  /** 每行的高度，用于计算展开/收起按钮的位置 */
+  lineHeight?: string
+  /** 展开/收起按钮的背景色，不设置则使用父元素背景色 */
+  toggleBg?: string
+  /** 展开/收起按钮的悬停背景色，不设置则使用父元素背景色 */
+  toggleHoverBg?: string
+  /** tooltip模式下显示的最大行数，默认1（单行省略），设为0或不设置则不限制 */
+  tooltipLineClamp?: number
+}
+const slots = useSlots()
+
+/**
+ * tooltip弹窗样式，计算最大宽度
+ */
+const tooltipStyle = computed(() => {
+  return props.tooltipMaxWidth ? { maxWidth: props.tooltipMaxWidth } : {}
+})
+
+/**
+ * 获取文本容器的样式
+ * 支持多行省略（tooltipLineClamp > 0）
+ */
+function getTextStyle() {
+  const style: Record<string, string> = {
+    minWidth: props.width || '100%',
+    lineHeight: props.lineHeight,
+  }
+
+  if (props.tooltipLineClamp > 0) {
+    style.display = '-webkit-box'
+    style.WebkitLineClamp = String(props.tooltipLineClamp)
+    style.WebkitBoxOrient = 'vertical'
+    style.overflow = 'hidden'
+    style.textOverflow = 'ellipsis'
+  }
+
+  return style
+}
+
+/** 文本容器的DOM引用 */
+const containerRef = ref<HTMLElement>()
+/** 文本是否溢出 */
+const isOverflow = ref(false)
+
+/**
+ * 判断tooltip是否禁用
+ * - 如果手动设置了disabled，使用手动设置的值
+ * - 如果是非tooltip模式且有content，则启用
+ * - 否则根据文本是否溢出来决定
+ */
+const isDisabled = computed(() => {
+  if (props.tooltipContent || slots.tooltipContent) {
+    return false
+  }
+
+  if (props.disabled !== undefined) {
+    return props.disabled
+  }
+
+  return !isOverflow.value
+})
+
+/**
+ * 检测文本是否溢出
+ * - 单行模式：比较文本宽度和容器宽度
+ * - 多行模式：比较scrollHeight和clientHeight（垂直溢出）
+ */
+function checkOverflow() {
+  if (!containerRef.value) {
+    return
+  }
+
+  // 多行模式：检测垂直溢出
+  if (props.lineClamp && props.lineClamp > 1) {
+    if (!isCollapsed.value) {
+      isOverflow.value = true
+      return
+    }
+    const textContent: any = containerRef.value.querySelector('.dk-tooltip-text-content')
+    if (!textContent) {
+      return
+    }
+    const originalDisplay = textContent.style.display
+    const originalLineClamp = textContent.style.webkitLineClamp
+    textContent.style.display = 'block'
+    textContent.style.webkitLineClamp = 'none'
+    const naturalHeight = textContent.scrollHeight
+    textContent.style.display = originalDisplay
+    textContent.style.webkitLineClamp = originalLineClamp
+    const limitedHeight = containerRef.value.clientHeight
+    isOverflow.value = naturalHeight > limitedHeight + 1
+    return
+  }
+
+  // 单行模式：检测水平溢出
+  let parentWidth: number
+
+  // 如果设置了固定宽度，使用该宽度
+  if (props.width) {
+    parentWidth = Number.parseFloat(props.width)
+  } else {
+    // 否则获取父元素的宽度
+    const parent = containerRef.value.parentElement
+    if (!parent) {
+      isOverflow.value = containerRef.value.scrollWidth > containerRef.value.clientWidth
+      return
+    }
+    parentWidth = parent.clientWidth
+  }
+
+  // 计算文本宽度并比较
+  const textWidth = getTextWidth(props.text)
+  isOverflow.value = textWidth > parentWidth
+}
+
+/**
+ * 使用canvas测量文本宽度
+ * @param text 要测量的文本
+ * @returns 文本宽度（像素）
+ */
+function getTextWidth(text: string): number {
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+  if (!context) {
+    return 0
+  }
+  context.font = getComputedStyle(containerRef.value!).font || '14px system-ui'
+  const metrics = context.measureText(text)
+  return metrics.width
+}
+
+/**
+ * 获取父元素的背景色
+ * 用于折叠按钮的背景色，使其与父元素融合
+ */
+const fatherBg = computed(() => {
+  if (props.toggleBg) {
+    return props.toggleBg
+  }
+  const parent = containerRef.value?.parentElement
+  if (!parent) {
+    return ''
+  }
+  return window.getComputedStyle(parent).backgroundColor
+})
+
+/** 监听容器尺寸变化的Observer */
+let resizeObserver: ResizeObserver | null = null
+/** 监听父元素尺寸变化的Observer */
+let parentObserver: ResizeObserver | null = null
+
+/**
+ * 切换折叠/展开状态
+ */
+function toggleCollapse() {
+  isCollapsed.value = !isCollapsed.value
+}
+
+/**
+ * 组件挂载后初始化
+ * - 检测文本溢出
+ * - 创建ResizeObserver监听容器和父元素尺寸变化
+ */
+onMounted(() => {
+  nextTick(() => {
+    checkOverflow()
+    if (containerRef.value) {
+      // 监听容器尺寸变化
+      resizeObserver = new ResizeObserver(() => {
+        checkOverflow()
+      })
+      resizeObserver.observe(containerRef.value)
+
+      // 监听父元素尺寸变化
+      const parent = containerRef.value.parentElement
+      if (parent) {
+        parentObserver = new ResizeObserver(() => {
+          checkOverflow()
+        })
+        parentObserver.observe(parent)
+      }
+    }
+  })
+})
+
+/**
+ * 组件卸载时断开所有Observer连接
+ */
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+  parentObserver?.disconnect()
+})
+
+defineExpose({
+  toggleCollapse,
+})
+</script>
+
+<template>
+  <!-- tooltip模式：当设置了tooltip且文本溢出时显示el-tooltip提示 -->
+  <el-tooltip
+    v-if="tooltip"
+    :effect="effect"
+    :placement="placement"
+    :disabled="isDisabled"
+    :popper-style="tooltipStyle"
+  >
+    <template #content>
+      <slot name="tooltipContent">
+        {{ tooltipContent || text }}
+      </slot>
+    </template>
+    <div
+      ref="containerRef"
+      class="dk-tooltip-text"
+      :class="{ 'is-multiline': props.tooltipLineClamp && props.tooltipLineClamp > 1 }"
+      :style="getTextStyle()"
+    >
+      <slot>
+        {{ text }}
+      </slot>
+    </div>
+  </el-tooltip>
+
+  <!-- 折叠模式：当tooltip为false时启用，支持多行显示和展开/收起功能 -->
+  <div
+    v-else
+    ref="containerRef"
+    class="dk-tooltip-collapse"
+    :class="{ 'is-expanded': !isCollapsed }"
+    :style="{ minWidth: props.width || '100%', lineHeight: props.lineHeight }"
+  >
+    <!-- 文本内容区域 -->
+    <div
+      class="dk-tooltip-text-content"
+      :style="
+        isCollapsed
+          ? {
+            display: '-webkit-box',
+            WebkitLineClamp: props.lineClamp,
+            WebkitBoxOrient: 'vertical',
+          }
+          : {}
+      "
+    >
+      {{ text }}
+    </div>
+
+    <!-- 展开/收起触发器：当文本溢出时显示 -->
+    <div
+      v-if="isOverflow"
+      class="dk-tooltip-toggle"
+      :style="{
+        'height': props.lineHeight,
+        'background': fatherBg,
+        'bottom': !isCollapsed ? `-${props.lineHeight}` : '0',
+        '--toggle-hover-bg': props.toggleHoverBg || 'inherit',
+      }"
+      @click.stop="toggleCollapse"
+    >
+      <!-- 自定义折叠触发器的插槽，默认显示展开/收起按钮和图标 -->
+      <slot name="collapse-trigger" :is-collapsed="isCollapsed">
+        <span>{{ isCollapsed ? '展开' : '收起' }}</span>
+        <el-icon v-if="isCollapsed">
+          <ArrowDown />
+        </el-icon>
+        <el-icon v-else>
+          <ArrowUp />
+        </el-icon>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+/** tooltip模式的文本样式，单行省略 */
+.dk-tooltip-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  width: 0;
+  min-width: 100%;
+  // font-size: 12px;
+
+  /** 多行省略模式 */
+  &.is-multiline {
+    white-space: normal;
+    word-break: break-word;
+  }
+}
+
+/** 折叠模式的容器样式 */
+.dk-tooltip-collapse {
+  position: relative;
+  width: 0;
+  min-width: 100%;
+  box-sizing: border-box;
+
+  /** 文本内容区域 */
+  .dk-tooltip-text-content {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    font-size: 12px;
+  }
+
+  /** 展开/收起触发按钮 */
+  .dk-tooltip-toggle {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    color: inherit;
+    cursor: pointer;
+    background: #fff;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+
+    /** 省略号装饰，折叠时显示 */
+    &::before {
+      content: '...';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      color: inherit;
+    }
+  }
+
+  &:hover {
+    .dk-tooltip-toggle {
+      background: var(--toggle-hover-bg, inherit) !important;
+    }
+  }
+
+  /** 展开状态样式 */
+  &.is-expanded {
+    .dk-tooltip-text-content {
+      white-space: normal;
+    }
+
+    /** 展开时隐藏省略号 */
+    .dk-tooltip-toggle {
+      padding-left: 0;
+      &::before {
+        display: none;
+      }
+    }
+  }
+}
+</style>

package/src/packages/dk-tooltip-collapse/view/index.vue

@@ -0,0 +1,421 @@
+<script setup lang="ts">
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+import { ref } from 'vue'
+import ComCollapse from '@/components/CodeCollapse.vue'
+import MarkdownRenderer from '@/components/MarkdownRenderer.vue'
+import DkTooltipCollapse from '../src/index.vue'
+
+const collapsedVal = ref(false)
+const aaRef = ref<any>(null)
+function changeVal() {
+  aaRef.value?.toggleCollapse()
+}
+const wVal = ref(
+  '春江潮水连海月共潮生月共潮生滟波滟随波千万里，何处春江无月明！江流宛转绕芳甸，月照花林皆似霰。白云一片去悠悠，何处相思明月楼',
+)
+const wVal2 = ref(
+  '春江潮水连海月共潮生月共潮生滟波滟随波千万里，何处春江无月明！江流宛转绕芳甸，月照花林皆似霰。白云一片去悠悠，何处相',
+)
+
+const textVal = ref(`春江潮水连海月共潮生月共潮生。
+  滟波滟随波千万里，何处春江无月明！
+  江流宛转绕芳甸，月照花林皆似霰。
+  空里流霜不觉飞，汀上白沙看不见。
+  江天一色无纤尘，皎皎空中孤月轮。
+  江畔何人初见月？江月何年初照人？
+  人生代代无穷已，江月年年望相似。
+  不知江月待何人，但见长江送流水。
+  白云一片去悠悠，青枫浦上不胜愁。
+  谁家今夜扁舟子？何处相思明月楼？
+  可怜楼上月徘徊，应照离人妆镜台。
+  玉户帘中卷不去，捣衣砧上拂还来。
+  此时相望不相闻，愿逐月华流照君。
+  鸿雁长飞光不度，鱼龙潜跃水成文。
+  昨夜闲潭梦落花，可怜春半不还家。
+  江水流春去欲尽，江潭落月复西斜。
+  斜月沉沉藏海雾，碣石潇湘无限路。
+  不知乘月几人归，落月摇情满江树。`)
+const textVal2 = ref(`坐上那朵离家的云霞
+飘去无人知晓的天涯
+背着妈妈说的那句话
+孩子人生其实不复杂
+
+喔～眼泪轻轻地擦
+别管那多嘴乌鸦
+咽下那些风沙
+你才能慢慢长大
+要错过几个她
+用你最好的年华
+这是青春的代价
+
+【副歌】
+当离别开出花 伸出新长的枝桠
+像冬去春又来 等待心雪融化
+你每次离开家 带着远方的牵挂
+那城市的繁华 盖住了月牙
+
+当离别开出花 它生长在悬崖
+在最高的山顶 才听得见回答
+没什么好害怕 孩子放心去飞吧
+在你的身后 有个等你的家
+
+坐上那朵离家的云霞
+飘去无人知晓的天涯
+背着妈妈说的那句话
+孩子人生其实不复杂
+
+喔～眼泪轻轻地擦
+别忘那童年梦话
+散在远方的花 也随风慢慢长大
+要错过几个她
+用你最真的年华
+这是青春的回答
+
+【副歌重复】
+
+当离别开出花 伸出新长的枝桠
+像冬去春又来 等待心雪融化
+你每次离开家 带着远方的牵挂
+那城市的繁华 盖住了月牙
+
+当离别开出花 它生长在悬崖
+在最高的山顶 才听得见回答
+没什么好害怕 孩子放心去飞吧
+在你的身后 有个等你的家`)
+const tooltipContent = ref(
+  '这是唐代诗人张若虚的作品。这首诗共三十六句，描绘了春江月夜的壮丽景色，并由此引发对宇宙、人生的哲理思考以及游子思妇的离愁别绪，素有“孤篇盖全唐”的美誉',
+)
+
+const demoCode01 = ref(
+  `<DkTooltipCollapse :text="textVal" />
+
+const textVal = ref('xxxxxxxxxxxxxxxxxxx')
+import { DkTooltipCollapse } from '@dk-component/comp';`,
+)
+
+const demoCode02 = ref(
+  `<div style="width: 500px;">
+      <DkTooltipCollapse :text="'弹框宽度默认为100%。'+textVal" />
+      <DkTooltipCollapse :text="'弹框宽度为350px。'+textVal" tooltip-max-width="350px" />
+      <br>
+      <DkTooltipCollapse :text="'tooltipLineClamp为2行。'+textVal" tooltip-max-width="400px" :tooltip-line-clamp="2" />
+
+      <div style="width: 100%; display: flex; text-indent: 24px;">
+        <div style="flex: 1;">
+          <DkTooltipCollapse :text="textVal2" tooltip-max-width="400px" :tooltip-line-clamp="2" />
+        </div>
+      </div>
+      <br>
+
+      <h3>自定义 slot</h3>
+      <h4>1.slot 显示内容 完全自定义 ：</h4>
+      <DkTooltipCollapse :text="'弹框宽度默认为100%'+textVal">
+        <div>
+          <span style="color: red; font-weight: 800;">我是额外的内容, </span>
+          <span>{{ textVal }}</span>
+        </div>
+      </DkTooltipCollapse>
+      <h4>2.slot 显示内容 通过 text 传递 ：</h4>
+      <DkTooltipCollapse text="弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容" width="135px" :tooltip-content="tooltipContent" />
+
+      <h4>3.slot 弹框内容 自定义 ：</h4>
+      <DkTooltipCollapse text="弹框-中是自定义内容" width="150px">
+        <template #tooltipContent>
+          <p>33333333333</p>
+          multiple lines<br>second line
+          multiple lines<br>second line
+          multiple lines<br>second line
+          multiple lines<br>second line
+          multiple lines<br>second line
+        </template>
+      </DkTooltipCollapse>
+</div>
+
+const textVal = ref('xxxxxxxxxxxxxxxxxxx');
+const tooltipContent = ref("这是唐代诗人张若虚的作品。这首诗共三十六句，描绘了春江月夜的壮丽景色，并由此引发对宇宙、人生的哲理思考以及游子思妇的离愁别绪，素有“孤篇盖全唐”的美誉");
+
+import { DkTooltipCollapse } from '@dk-component/comp';`,
+)
+
+const demoCode03 = ref(
+  `<h4>设置 展开 还是收起</h4>
+    <div>
+      <h4>设置 展开 还是收起</h4>
+      <button @click="changeVal">
+        通过 ref  控制 展开/收起
+      </button>
+      <DkTooltipCollapse ref="aaRef" :text="textVal" :tooltip="false" toggle-bg="cyan" toggle-hover-bg="red" :is-collapsed="collapsedVal" />
+    </div>
+    <br>
+
+    <h4>设置展开行数</h4>
+    <div style="display: flex;">
+  <div style="flex: 1;">
+    <DkTooltipCollapse :text="textVal" :tooltip="false" toggle-bg="cyan" toggle-hover-bg="red" />
+  </div>
+  <div style="flex: 1; background: yellow; color: red;">
+    <DkTooltipCollapse :text="textVal" :tooltip="false" :line-clamp="3" />
+  </div>
+  <div style="flex: 1; background: #999;">
+    <DkTooltipCollapse :text="textVal" :tooltip="false" :line-clamp="2" line-height="40px" />
+  </div>
+</div>
+
+const textVal = ref('xxxxxxxxxxxxxxxxxxx')
+import { DkTooltipCollapse } from '@dk-component/comp';
+
+const collapsedVal = ref(false);
+const aaRef = ref<any>(null);
+function changeVal() {
+  aaRef.value?.toggleCollapse();
+}
+
+`,
+)
+
+const demoCode04 = ref(
+  `<DkTooltipCollapse :text="textVal" toggle-bg="cyan" class="my-box">
+  <template #collapse-trigger="{ isCollapsed }">
+    <el-icon>
+      <ArrowDown v-if="isCollapsed" />
+      <ArrowUp v-else />
+    </el-icon>
+  </template>
+</DkTooltipCollapse>
+
+const textVal = ref('xxxxxxxxxxxxxxxxxxx')
+import { DkTooltipCollapse } from '@dk-component/comp';
+
+<style lang="scss" scoped>
+:deep(.my-box) {
+  &.is-expanded {
+    .dk-tooltip-toggle {
+      bottom: 0 !important;
+    }
+  }
+}
+</style>
+`,
+)
+
+// Markdown表格内容
+const propsTable = ref(`
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| text | string | "" | 显示的文本内容 |
+| width | string | "" | 容器最小宽度，例如 "200px" |
+| placement | string | "top" | tooltip 弹框 弹出位置，可选值：top /bottom /left /right /top-start /top-end /bottom-start /bottom-end /left-start /left-end /right-start /right-end |
+| tooltip-content | string | "" | tooltip 弹框 提示内容，不设置则使用 text |
+| tooltip-max-width | string | "90%" | tooltip 弹框 最大宽度 |
+| effect | string | "dark" | tooltip 弹框 主题色，可选值：dark /light |
+| disabled | boolean | undefined | 是否禁用 |
+| tooltip | boolean | true | true-弹框模式; false-折叠模式 |
+| isCollapsed | boolean | true | 起始状态： true-收起; false-展开 |
+| line-clamp | number | 1 | 折叠模式-'展开'时显示的最大行数 |
+| line-height | string | "20px" | 每行的高度，用于计算展开/收起 的位置 |
+| toggleBg | string | "" | 展开/收起 的背景色，默认使用 父元素 的背景色 |
+| toggleHoverBg | string | "" | 展开/收起 的悬停背景色，默认使用 父元素 的背景色 |
+| 事件： toggleCollapse | Function | 折叠模式-点击展开/收起 通过 ref 触发 |
+`)
+
+const slotsTable = ref(`
+| 插槽名 | 说明 | 参数 |
+|--------|------|------|
+| default | 自定义 text 显示内容 | html |
+| tooltipContent | 自定义 tooltip 弹框 提示内容 | string/html |
+| collapse-trigger | 展开+收起时：展开+收起的自定义插槽 | html |
+`)
+</script>
+
+<template>
+  <div class="demo-container height-stretch overflow-auto-y custom-scrollbar-gradient">
+    <h1>文本溢出显示省略号并支持展开/收起的组件，同时支持 tooltip 模式显示完整文本</h1>
+    <div>
+      <h2>1.基础用法</h2>
+      <code>不设置宽度，就随父级宽度变化， 默认 100%</code>
+      <DkTooltipCollapse :text="textVal" />
+      <ComCollapse class="com-collapse" :code="demoCode01" />
+    </div>
+
+    <h2>2.父级宽度为500px时</h2>
+    <div style="width: 500px">
+      <DkTooltipCollapse :text="`弹框宽度默认为100%。${textVal}`" />
+      <DkTooltipCollapse :text="`弹框宽度为350px。${textVal}`" tooltip-max-width="350px" />
+      <br>
+      <DkTooltipCollapse
+        :text="`tooltipLineClamp为2行。${textVal}`"
+        tooltip-max-width="400px"
+        :tooltip-line-clamp="2"
+      />
+
+      <div style="width: 100%; display: flex; text-indent: 24px">
+        <div style="flex: 1">
+          <DkTooltipCollapse :text="textVal2" tooltip-max-width="400px" :tooltip-line-clamp="2" />
+        </div>
+      </div>
+      <br>
+
+      <h3>自定义 slot</h3>
+      <h4>1.slot 显示内容 完全自定义 ：</h4>
+      <DkTooltipCollapse :text="`弹框宽度默认为100%。${textVal}`">
+        <div>
+          <span style="color: red; font-weight: 800">我是额外的内容, </span>
+          <span>{{ textVal }}</span>
+        </div>
+      </DkTooltipCollapse>
+      <h4>2.slot 显示内容 通过 text 传递 ：</h4>
+      <DkTooltipCollapse
+        text="弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容弹框-中是其他内容"
+        width="135px"
+        :tooltip-content="tooltipContent"
+      />
+
+      <h4>3.slot 弹框内容 自定义 ：</h4>
+      <DkTooltipCollapse text="弹框-中是自定义内容" width="150px">
+        <template #tooltipContent>
+          <p>33333333333</p>
+          multiple lines<br>second line multiple lines<br>second line multiple lines<br>second
+          line multiple lines<br>second line multiple lines<br>second line
+        </template>
+      </DkTooltipCollapse>
+    </div>
+    <ComCollapse class="com-collapse" :code="demoCode02" />
+
+    <h2>3.折叠模式: 展开+收起</h2>
+    <code>设置 `tooltip` 为 `false` 启用折叠模式，支持多行省略和展开/收起功能。</code>
+
+    <div>
+      <h4>设置 展开 还是收起</h4>
+      <button @click="changeVal">
+        通过 ref 控制 展开/收起
+      </button>
+      <DkTooltipCollapse
+        ref="aaRef"
+        :text="textVal"
+        :tooltip="false"
+        toggle-bg="cyan"
+        toggle-hover-bg="red"
+        :is-collapsed="collapsedVal"
+      />
+    </div>
+    <br>
+
+    <h4>设置展开行数</h4>
+    <div style="display: flex">
+      <div style="flex: 1">
+        <DkTooltipCollapse
+          :text="`默认1行：${textVal}`"
+          :tooltip="false"
+          toggle-bg="cyan"
+          toggle-hover-bg="red"
+        />
+      </div>
+      <div style="flex: 1; background: yellow; color: red">
+        <DkTooltipCollapse :text="`显示3行：${textVal}`" :tooltip="false" :line-clamp="3" />
+      </div>
+      <div style="flex: 1; background: #999">
+        <DkTooltipCollapse
+          :text="`行高48px,显示2行：${textVal}`"
+          :tooltip="false"
+          :line-clamp="2"
+          line-height="40px"
+        />
+      </div>
+    </div>
+    <ComCollapse class="com-collapse" :code="demoCode03" />
+
+    <div style="margin-top: 20px; width: 350px; border: 1px solid #ccc">
+      <p>设置默认最多显示2行，如果文字不够2行，就不显示展开/收起</p>
+      <DkTooltipCollapse
+        :text="wVal"
+        :tooltip="false"
+        toggle-bg="cyan"
+        toggle-hover-bg="red"
+        :line-clamp="2"
+      />
+      <p>文字不够2行</p>
+      <DkTooltipCollapse
+        :text="wVal2"
+        :tooltip="false"
+        toggle-bg="cyan"
+        toggle-hover-bg="red"
+        :line-clamp="2"
+      />
+    </div>
+
+    <div style="width: 500px">
+      <br>
+      <h6>注意：默认展开/收起按钮的背景色为父级背景色；如果父级不设置背景色，默认为透明:</h6>
+      <DkTooltipCollapse :text="textVal" :tooltip="false" />
+      <br>
+      <h6>设置 `toggleBg` 为自定义颜色，即可改变展开/收起按钮的背景色:</h6>
+      <DkTooltipCollapse :text="textVal" :tooltip="false" toggle-bg="#f5f5f5" />
+      <code>
+        此时会出现一个问题："...展开"会把部分文字遮住部分，是因为设置父级的宽度不合理造成的，
+        可以自己设置 "...展开"的 css 样式，例如：
+        <pre>
+:deep(.dk-tooltip-collapse){
+  .dk-tooltip-toggle{
+    padding-left: 25px;
+  }
+}
+        </pre>
+      </code>
+    </div>
+
+    <h3>自定义：展开/收起按钮</h3>
+    <div style="width: 472px" class="list-box">
+      <DkTooltipCollapse :tooltip="false" :text="textVal" class="my-box" toggle-hover-bg="red">
+        <template #collapse-trigger="{ isCollapsed }">
+          <el-icon>
+            <ArrowDown v-if="isCollapsed" />
+            <ArrowUp v-else />
+          </el-icon>
+        </template>
+      </DkTooltipCollapse>
+    </div>
+    <ComCollapse class="com-collapse" :code="demoCode04" />
+
+    <!-- 参数表格 -->
+    <section class="markdown-section">
+      <h2>DkTooltipCollapse 参数</h2>
+      <MarkdownRenderer :content="propsTable" />
+      <h2>Slots 插槽</h2>
+      <MarkdownRenderer :content="slotsTable" />
+    </section>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// @import url('@/assets/styles/demo.scss');
+.box-item {
+  :deep(.el-tooltip__popper) {
+    transform: translate(-60%, -100%) !important;
+    margin: 0 !important;
+  }
+  :deep(.el-tooltip__popper.is-dark) {
+    transform: translate(-60%, -100%) !important;
+    margin: 0 !important;
+  }
+}
+
+:deep(.my-box) {
+  &.is-expanded {
+    .dk-tooltip-toggle {
+      bottom: 0 !important;
+    }
+  }
+}
+
+.list-box {
+  background: yellowgreen;
+  &:hover {
+    background: red;
+  }
+}
+:deep(.com-collapse) {
+  .el-collapse-item__header {
+    padding-left: 20px;
+  }
+}
+</style>

package/src/packages/index.ts

@@ -0,0 +1,3 @@
+import RollNumber from './roll-number/src/index.vue'
+
+export { RollNumber }

package/src/packages/roll-number/index.ts

@@ -0,0 +1,6 @@
+import RollNumber from './src/index.vue'
+
+RollNumber.install = function (Vue: any) {
+  Vue.component('RollNumber', RollNumber)
+}
+export default RollNumber

package/src/packages/roll-number/src/index.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+/**
+ * 组件属性接口
+ */
+interface Props {
+  /** 目标数字 */
+  value?: number
+  /** 动画持续时间（毫秒），默认 1200ms */
+  duration?: number
+  /** 缓动函数类型，默认 'easeOutQuad' */
+  easing?: 'easeOutQuad' | 'easeOutCubic' | 'linear'
+  /** 是否显示千分号，默认 false */
+  thousandsSeparator?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  /** 目标数字 */
+  value: 0,
+  /** 动画持续时间（毫秒），默认 1200ms */
+  duration: 1200,
+  /** 缓动函数类型，默认 'easeOutQuad' */
+  easing: 'easeOutQuad',
+  /** 是否显示千分号，默认 false */
+  thousandsSeparator: false,
+})
+
+/** 当前显示的数字 */
+const count = ref(0)
+/** 动画请求 ID，用于取消动画 */
+let animationId: number | null = null
+/** 动画开始时间戳 */
+let startTime: number | null = null
+/** 动画起始数值 */
+let startValue = 0
+
+/**
+ * 缓动函数集合
+ */
+const easingFunctions = {
+  /** 线性缓动 */
+  linear: (t: number) => t,
+  /** 二次缓动（先快后慢） */
+  easeOutQuad: (t: number) => t * (2 - t),
+  /** 三次缓动（更柔和的先快后慢） */
+  easeOutCubic: (t: number) => --t * t * t + 1,
+}
+
+/**
+ * 动画帧回调函数
+ * @param timestamp - 时间戳
+ */
+function animate(timestamp: number) {
+  // 记录开始时间
+  if (!startTime) {
+    startTime = timestamp
+  }
+  // 计算动画进度 (0-1)
+  const progress = Math.min((timestamp - startTime) / props.duration, 1)
+  // 获取缓动函数
+  const easingFn = easingFunctions[props.easing]
+  // 应用缓动函数
+  const easedProgress = easingFn(progress)
+  // 计算当前数字
+  const currentNumber = startValue + (props.value - startValue) * easedProgress
+  count.value = currentNumber
+
+  // 继续下一帧或结束动画
+  if (progress < 1) {
+    animationId = requestAnimationFrame(animate)
+  } else {
+    count.value = props.value
+    animationId = null
+  }
+}
+
+/**
+ * 开始数字滚动动画
+ */
+function startAnimation() {
+  // 取消之前的动画
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+  }
+  // 重置开始时间
+  startTime = null
+  // 记录当前值作为起始值
+  startValue = count.value
+  // 开始新动画
+  animationId = requestAnimationFrame(animate)
+}
+
+/**
+ * 获取数字的小数位数
+ * @param num - 数字
+ * @returns 小数位数
+ */
+function getDecimalPlaces(num: number): number {
+  const str = num.toString()
+  const dotIndex = str.indexOf('.')
+  return dotIndex === -1 ? 0 : str.length - dotIndex - 1
+}
+
+/**
+ * 去除小数尾部多余的零
+ * @param str - 数字字符串
+ * @returns 处理后的字符串
+ */
+function stripTrailingZeros(str: string): string {
+  // 更安全的正则，避免超线性回溯
+  const dotIndex = str.indexOf('.')
+  if (dotIndex === -1) {
+    return str
+  }
+  let end = str.length
+  while (end > dotIndex + 1 && str.charAt(end - 1) === '0') {
+    end--
+  }
+  return str.slice(0, end)
+}
+
+/**
+ * 格式化显示的数字
+ */
+const formattedCount = computed(() => {
+  const decimalPlaces = getDecimalPlaces(props.value)
+  const fixedNumber = count.value.toFixed(decimalPlaces)
+  const stripped = stripTrailingZeros(fixedNumber)
+  if (props.thousandsSeparator) {
+    const parts = stripped.split('.')
+    parts[0]! = parts[0]!.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    return parts.join('.')
+  }
+  return stripped
+})
+
+/**
+ * 监听关键属性变化，重新触发动画
+ */
+watch([() => props.value, () => props.duration, () => props.easing], () => {
+  startAnimation()
+})
+
+/**
+ * 组件挂载时启动动画
+ */
+onMounted(() => {
+  startAnimation()
+})
+
+/**
+ * 组件卸载时清理动画，防止内存泄漏
+ */
+onUnmounted(() => {
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+  }
+})
+</script>
+
+<template>
+  <!-- 数字滚动组件 -->
+  <div class="counter number-tabular number-modern">
+    {{ formattedCount }}
+  </div>
+</template>
+
+<style scoped lang="scss">
+.counter {
+  font-weight: 800;
+}
+/* 示例：为数字指定一个等宽字体，让它们占位宽度相同，利于对齐 */
+.number-tabular {
+  /* 'Courier New', 'Consolas' 等是常见的等宽字体，数字默认等宽 */
+  font-family: 'Courier New', 'SF Mono', 'Consolas', monospace;
+}
+
+/* 示例：使用系统默认的 sans-serif 字体，让数字显示更现代 */
+.number-modern {
+  font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+}
+</style>

package/src/packages/roll-number/view/index.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import ComCollapse from '@/components/CodeCollapse.vue'
+import MarkdownRenderer from '@/components/MarkdownRenderer.vue'
+import RollNumber from '../src/index.vue'
+
+const code = ref(`
+<p>基础用法</p>
+<RollNumber :value="50000" :duration="3000" />
+<p>小数位</p>
+<RollNumber :value="50000.123456789" :duration="3000" />
+<p>千分位</p>
+<RollNumber :value="1234567" :duration="3000" :thousands-separator="true" />
+<p class="color-jb">千分位+小数位</p>
+<RollNumber
+  :value="1234567.123456789"
+  :duration="3000"
+  :thousands-separator="true"
+/>
+
+import { RollNumber } from '@shimmerUI/comp';
+`)
+
+// Markdown表格内容
+const propsTable = ref(`
+| 参数名 | 说明 | 类型 | 默认值 |
+|--------|------|------|-------|
+| value  | 值 | Number |  |
+| duration  | 动画持续时间（毫秒） | Number | 1200 |
+| easing  | 缓动函数类型 | String | 'easeOutQuad' |
+| thousandsSeparator  | 是否显示千分号 | Boolean | false |
+`)
+</script>
+
+<template>
+  <div class="demo-container height-stretch overflow-auto-y custom-scrollbar-gradient">
+    <!-- 标题 -->
+    <h2>数字滚动组件-RollNumber</h2>
+
+    <!-- 组件示例展示 -->
+    <section class="demo-section">
+      <div class="demo-block">
+        <p>基础用法</p>
+        <RollNumber :value="50000" :duration="3000" />
+        <p>小数位</p>
+        <RollNumber :value="50000.123456789" :duration="3000" />
+        <p>千分位</p>
+        <RollNumber :value="1234567" :duration="3000" :thousands-separator="true" />
+        <p class="color-jb">
+          千分位+小数位
+        </p>
+        <RollNumber :value="1234567.123456789" :duration="3000" :thousands-separator="true" />
+      </div>
+      <ComCollapse class="com-collapse" :code="code" />
+    </section>
+
+    <!-- 参数表格 -->
+    <section>
+      <h2>RollNumber API</h2>
+      <MarkdownRenderer :content="propsTable" />
+    </section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.demo-container {
+  padding: 20px;
+  background-color: #fff;
+}
+.demo-block {
+  font-size: 30px;
+}
+
+:deep(.com-collapse) {
+  .el-collapse-item__header {
+    padding-left: 20px;
+  }
+}
+</style>