@opendesign-plus/components 0.0.1-rc.6 → 0.0.1-rc.7

package/src/components/element-plus/OElCookieNotice.vue

@@ -1,412 +1,412 @@
-<script lang="ts" setup>
-import { ref, onMounted, computed, nextTick, watch } from 'vue';
-import ClientOnly from '../common/ClientOnlyWrapper';
-import { useScreen } from '@opendesign-plus/composables';
-import { useI18n } from '@/i18n';
-import { ElButton, ElDialog, ElSwitch, ElIcon } from 'element-plus';
-import { useVModel } from '@vueuse/core';
-
-const NOT_SIGNED = '0';
-const ALL_AGREED = '1';
-const NECCESSARY_AGREED = '2';
-const NOT_SHOW_BUT_AGREED = '3';
-const COOKIE_KEY_ZH = 'agreed-cookiepolicy-zh';
-const COOKIE_KEY_EN = 'agreed-cookiepolicy-en';
-
-const props = defineProps<{
-  visible?: boolean;
-  enableGrid?: boolean;
-  community: string;
-  detailUrl: string;
-  wrapper?: string | HTMLElement;
-  cookieDomain: string;
-}>();
-
-const emits = defineEmits<{
-  (e: 'update:visible', value: boolean): void;
-}>();
-
-const { lePadV } = useScreen();
-const { locale, t } = useI18n();
-const isZh = computed(() => locale.value === 'zh');
-
-const cookieKey = computed(() => (isZh.value ? COOKIE_KEY_ZH : COOKIE_KEY_EN));
-
-// 是否允许分析cookie
-const analysisAllowed = ref(false);
-const visibleVmodel = useVModel(props, 'visible', emits, { defaultValue: false });
-
-const getCookie = (key: string) => {
-  const cookie = document.cookie.split(';').find((row) => row.split('=')[0].trim() === encodeURIComponent(key));
-  if (!cookie) {
-    return null;
-  }
-  return decodeURIComponent(cookie.split('=')[1]);
-};
-
-const setCookie = (key: string, value: string, days: number, domain: string) => {
-  const maxAge = days ? `; max-age=${days * 24 * 60 * 60}` : '';
-  document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}${maxAge}; path=/; domain=${domain}`;
-};
-
-// 显示/隐藏cookie提示
-const toggleNoticeVisible = (val?: boolean) => {
-  if (typeof val === 'boolean') {
-    visibleVmodel.value = val;
-  } else {
-    visibleVmodel.value = !visibleVmodel.value;
-  }
-  nextTick(() => {
-    if (!visibleVmodel.value && isZh.value && getCookie(cookieKey.value) !== NOT_SHOW_BUT_AGREED) {
-      setCookie(cookieKey.value, NOT_SHOW_BUT_AGREED, 180, props.cookieDomain ?? location.hostname);
-    }
-  });
-};
-
-// 弹出框是否显示
-const isDlgVisible = ref(false);
-
-// 显示/隐藏弹出框
-const toggleDlgVisible = (val?: boolean) => {
-  if (typeof val === 'boolean') {
-    isDlgVisible.value = val;
-  } else {
-    isDlgVisible.value = !isDlgVisible.value;
-  }
-};
-
-// 是否未签署
-const isNotSigned = () => {
-  if (isZh.value) {
-    return getCookie(cookieKey.value) !== NOT_SHOW_BUT_AGREED;
-  }
-  return (getCookie(cookieKey.value) ?? '0') === NOT_SIGNED;
-};
-
-// 是否全部同意
-const isAllAgreed = () => {
-  if (isZh.value) {
-    return getCookie(cookieKey.value) === NOT_SHOW_BUT_AGREED;
-  }
-  return getCookie(cookieKey.value) === ALL_AGREED;
-};
-
-onMounted(() => {
-  // 未签署，展示cookie notice
-  if (isNotSigned()) {
-    toggleNoticeVisible(true);
-  }
-});
-
-watch(locale, () => {
-  toggleNoticeVisible(isNotSigned());
-});
-
-// 用户同意所有cookie
-const acceptAll = () => {
-  analysisAllowed.value = true;
-  setCookie(cookieKey.value, ALL_AGREED, 180, props.cookieDomain ?? location.hostname);
-  toggleNoticeVisible(false);
-};
-
-// 用户拒绝所有cookie，即仅同意必要cookie
-const rejectAll = () => {
-  analysisAllowed.value = false;
-  setCookie(cookieKey.value, NECCESSARY_AGREED, 180, props.cookieDomain ?? location.hostname);
-  toggleNoticeVisible(false);
-};
-
-const handleSave = () => {
-  if (analysisAllowed.value) {
-    acceptAll();
-  } else {
-    rejectAll();
-  }
-  toggleDlgVisible(false);
-};
-
-const handleAllowAll = () => {
-  analysisAllowed.value = true;
-  acceptAll();
-  toggleDlgVisible(false);
-};
-
-const onDlgOpening = () => {
-  analysisAllowed.value = isAllAgreed();
-};
-
-defineExpose({
-  check() {
-    const agreed = isAllAgreed();
-    if (agreed === visibleVmodel.value) {
-      toggleNoticeVisible();
-    }
-  },
-});
-</script>
-
-<template>
-  <ClientOnly>
-    <Teleport :to="wrapper || '#app'">
-      <div v-if="visibleVmodel" class="cookie-notice">
-        <div class="cookie-notice-content">
-          <div :type="locale" :class="{ 'cookie-notice-wrap-grid': enableGrid, 'cookie-notice-wrap': !enableGrid }">
-            <div class="cookie-notice-left">
-              <p v-if="isZh" class="cookie-desc" style="margin-top: 0">
-                {{ t('cookie.desc') }}
-                <a :href="detailUrl" target="_blank" rel="noopener noreferrer">
-                  {{ t('cookie.about') }}
-                </a>
-              </p>
-              <template v-else>
-                <p class="cookie-title">{{ t('cookie.title', [community]) }}</p>
-                <p class="cookie-desc">
-                  {{ t('cookie.desc') }}
-                  <a :href="detailUrl" target="_blank" rel="noopener noreferrer">{{ t('cookie.about') }} </a>.
-                </p>
-              </template>
-            </div>
-            <div v-if="!isZh" class="cookie-notice-right">
-              <el-button round type="primary" @click="acceptAll">{{ t('cookie.acceptAll') }}</el-button>
-              <el-button round type="primary" @click="rejectAll">{{ t('cookie.rejectAll') }}</el-button>
-              <el-button round type="primary" @click="toggleDlgVisible(true)">{{ t('cookie.manage') }}</el-button>
-            </div>
-            <el-icon class="cookie-notice-close" :type="locale" @click="toggleNoticeVisible(false)">
-              <slot name="close-icon">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z" /></svg>
-              </slot>
-            </el-icon>
-          </div>
-        </div>
-        <el-dialog v-model="isDlgVisible" :width="lePadV ? '90%' : '50%'" :title="t('cookie.manage')" destroy-on-close @open="onDlgOpening">
-          <div class="cookie-dlg-content">
-            <div class="content-item">
-              <div class="item-header">
-                <span class="item-title">{{ t('cookie.necessaryCookie') }}</span>
-                <span class="item-extra">{{ t('cookie.alwaysOn') }}</span>
-              </div>
-              <div class="item-detail">
-                {{ t('cookie.necessaryCookieDetail') }}
-              </div>
-            </div>
-            <div class="content-item">
-              <div class="item-header">
-                <span class="item-title">{{ t('cookie.analyticalCookie') }}</span>
-                <span class="item-extra">
-                  <el-switch v-model="analysisAllowed" />
-                </span>
-              </div>
-              <div class="item-detail">
-                {{ t('cookie.analyticalCookieDetail') }}
-              </div>
-            </div>
-          </div>
-          <template #footer>
-            <el-button round type="primary" @click="handleSave" style="margin-right: 16px">{{ t('cookie.saveSetting') }}</el-button>
-            <el-button round type="primary" @click="handleAllowAll">{{ t('cookie.acceptAll') }}</el-button>
-          </template>
-        </el-dialog>
-      </div>
-    </Teleport>
-  </ClientOnly>
-</template>
-
-<style lang="scss" scoped>
-.el-button {
-  --el-button-bg-color: transparent;
-  --el-button-text-color: var(--o-color-primary1);
-  --el-button-border-color: var(--o-color-primary1);
-  --el-button-hover-bg-color: var(--o-color-primary1);
-}
-
-.cookie-notice {
-  position: fixed;
-  bottom: 0;
-  z-index: 999;
-  width: 100%;
-  --el-color-primary: var(--o-color-primary1);
-  .o-button {
-    --o-button-font-size-mini: 14px;
-  }
-  .o-button + .o-button {
-    margin-left: 16px;
-
-    @media (max-width: 840px) {
-      margin-left: 0;
-      margin-top: 12px;
-    }
-  }
-}
-
-.cookie-notice-content {
-  background-color: rgba(var(--o-mixedgray-1), 0.9);
-  backdrop-filter: blur(5px);
-  box-shadow: var(--o-shadow-1);
-}
-
-.cookie-notice-wrap {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  margin: 0 auto;
-  padding: 24px var(--layout-content-padding);
-  max-width: var(--layout-content-max-width);
-  &:not([type='zh']) {
-    @media (max-width: 840px) {
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.cookie-notice-wrap-grid {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  width: var(--grid-content-width);
-  padding: 24px 0;
-  margin: 0 auto;
-  @media (max-width: 840px) {
-    padding: 16px 0;
-    flex-direction: column;
-    align-items: center;
-  }
-}
-
-.cookie-notice-left {
-  width: 60%;
-
-  @media (max-width: 1100px) {
-    width: 58%;
-  }
-
-  @media (max-width: 840px) {
-    width: 100%;
-  }
-
-  .cookie-title {
-    font-size: 16px;
-    line-height: 28px;
-    color: var(--o-color-info1);
-    font-weight: 500;
-    @media (max-width: 840px) {
-      font-size: 16px;
-      line-height: 24px;
-      text-align: center;
-    }
-  }
-
-  .cookie-desc {
-    font-size: 12px;
-    line-height: 18px;
-    color: var(--o-color-info2);
-    margin-top: 8px;
-  }
-}
-
-.cookie-notice-right {
-  display: flex;
-  align-items: center;
-  margin-top: 12px;
-
-  @media (max-width: 840px) {
-    width: 100%;
-  }
-
-  @media (max-width: 840px) {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .el-button:not(:first-child) {
-    margin-left: 16px;
-  }
-
-  @media (max-width: 840px) {
-    .el-button {
-      align-self: stretch;
-      &:not(:first-child) {
-        margin-top: 12px;
-        margin-left: 0;
-      }
-    }
-  }
-}
-
-.cookie-notice-close {
-  &[type='en'] {
-    position: absolute;
-    top: 16px;
-    right: var(--layout-content-padding);
-    transform-origin: center;
-  }
-  cursor: pointer;
-  color: var(--o-color-info1);
-  font-size: 20px;
-  &:hover {
-    color: var(--o-color-primary2);
-  }
-  @media (max-width: 840px) {
-    font-size: 14px;
-  }
-  @include x-svg-hover;
-}
-
-.cookie-dlg-content {
-  .content-item + .content-item {
-    margin-top: 24px;
-  }
-
-  .content-item {
-    .item-header {
-      display: flex;
-      align-items: center;
-      .item-title {
-        font-size: 18px;
-        line-height: 32px;
-        color: var(--o-color-info1);
-        font-weight: 500;
-      }
-
-      .item-extra {
-        font-size: 14px;
-        line-height: 22px;
-        color: var(--o-color-info3);
-        margin-left: 24px;
-      }
-    }
-
-    .item-detail {
-      font-size: 16px;
-      line-height: 28px;
-      color: var(--o-color-info2);
-      margin-top: 12px;
-      @media (max-width: 840px) {
-        font-size: 14px;
-        line-height: 21px;
-        margin-top: 8px;
-      }
-    }
-  }
-}
-
-:deep(.el-dialog) {
-  .el-dialog__header {
-    text-align: center;
-  }
-  .el-dialog__title {
-    font-size: 32px;
-    @media (max-width: 840px) {
-      font-size: 22px;
-    }
-  }
-  .el-dialog__footer {
-    text-align: center;
-    @media (max-width: 840px) {
-      .o-button {
-        margin: 0 8px;
-      }
-    }
-  }
-}
-</style>
+<script lang="ts" setup>
+import { ref, onMounted, computed, nextTick, watch } from 'vue';
+import ClientOnly from '../common/ClientOnlyWrapper';
+import { useScreen } from '@opendesign-plus/composables';
+import { useI18n } from '@/i18n';
+import { ElButton, ElDialog, ElSwitch, ElIcon } from 'element-plus';
+import { useVModel } from '@vueuse/core';
+
+const NOT_SIGNED = '0';
+const ALL_AGREED = '1';
+const NECCESSARY_AGREED = '2';
+const NOT_SHOW_BUT_AGREED = '3';
+const COOKIE_KEY_ZH = 'agreed-cookiepolicy-zh';
+const COOKIE_KEY_EN = 'agreed-cookiepolicy-en';
+
+const props = defineProps<{
+  visible?: boolean;
+  enableGrid?: boolean;
+  community: string;
+  detailUrl: string;
+  wrapper?: string | HTMLElement;
+  cookieDomain: string;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+}>();
+
+const { lePadV } = useScreen();
+const { locale, t } = useI18n();
+const isZh = computed(() => locale.value === 'zh');
+
+const cookieKey = computed(() => (isZh.value ? COOKIE_KEY_ZH : COOKIE_KEY_EN));
+
+// 是否允许分析cookie
+const analysisAllowed = ref(false);
+const visibleVmodel = useVModel(props, 'visible', emits, { defaultValue: false });
+
+const getCookie = (key: string) => {
+  const cookie = document.cookie.split(';').find((row) => row.split('=')[0].trim() === encodeURIComponent(key));
+  if (!cookie) {
+    return null;
+  }
+  return decodeURIComponent(cookie.split('=')[1]);
+};
+
+const setCookie = (key: string, value: string, days: number, domain: string) => {
+  const maxAge = days ? `; max-age=${days * 24 * 60 * 60}` : '';
+  document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}${maxAge}; path=/; domain=${domain}`;
+};
+
+// 显示/隐藏cookie提示
+const toggleNoticeVisible = (val?: boolean) => {
+  if (typeof val === 'boolean') {
+    visibleVmodel.value = val;
+  } else {
+    visibleVmodel.value = !visibleVmodel.value;
+  }
+  nextTick(() => {
+    if (!visibleVmodel.value && isZh.value && getCookie(cookieKey.value) !== NOT_SHOW_BUT_AGREED) {
+      setCookie(cookieKey.value, NOT_SHOW_BUT_AGREED, 180, props.cookieDomain ?? location.hostname);
+    }
+  });
+};
+
+// 弹出框是否显示
+const isDlgVisible = ref(false);
+
+// 显示/隐藏弹出框
+const toggleDlgVisible = (val?: boolean) => {
+  if (typeof val === 'boolean') {
+    isDlgVisible.value = val;
+  } else {
+    isDlgVisible.value = !isDlgVisible.value;
+  }
+};
+
+// 是否未签署
+const isNotSigned = () => {
+  if (isZh.value) {
+    return getCookie(cookieKey.value) !== NOT_SHOW_BUT_AGREED;
+  }
+  return (getCookie(cookieKey.value) ?? '0') === NOT_SIGNED;
+};
+
+// 是否全部同意
+const isAllAgreed = () => {
+  if (isZh.value) {
+    return getCookie(cookieKey.value) === NOT_SHOW_BUT_AGREED;
+  }
+  return getCookie(cookieKey.value) === ALL_AGREED;
+};
+
+onMounted(() => {
+  // 未签署，展示cookie notice
+  if (isNotSigned()) {
+    toggleNoticeVisible(true);
+  }
+});
+
+watch(locale, () => {
+  toggleNoticeVisible(isNotSigned());
+});
+
+// 用户同意所有cookie
+const acceptAll = () => {
+  analysisAllowed.value = true;
+  setCookie(cookieKey.value, ALL_AGREED, 180, props.cookieDomain ?? location.hostname);
+  toggleNoticeVisible(false);
+};
+
+// 用户拒绝所有cookie，即仅同意必要cookie
+const rejectAll = () => {
+  analysisAllowed.value = false;
+  setCookie(cookieKey.value, NECCESSARY_AGREED, 180, props.cookieDomain ?? location.hostname);
+  toggleNoticeVisible(false);
+};
+
+const handleSave = () => {
+  if (analysisAllowed.value) {
+    acceptAll();
+  } else {
+    rejectAll();
+  }
+  toggleDlgVisible(false);
+};
+
+const handleAllowAll = () => {
+  analysisAllowed.value = true;
+  acceptAll();
+  toggleDlgVisible(false);
+};
+
+const onDlgOpening = () => {
+  analysisAllowed.value = isAllAgreed();
+};
+
+defineExpose({
+  check() {
+    const agreed = isAllAgreed();
+    if (agreed === visibleVmodel.value) {
+      toggleNoticeVisible();
+    }
+  },
+});
+</script>
+
+<template>
+  <ClientOnly>
+    <Teleport :to="wrapper || '#app'">
+      <div v-if="visibleVmodel" class="cookie-notice">
+        <div class="cookie-notice-content">
+          <div :type="locale" :class="{ 'cookie-notice-wrap-grid': enableGrid, 'cookie-notice-wrap': !enableGrid }">
+            <div class="cookie-notice-left">
+              <p v-if="isZh" class="cookie-desc" style="margin-top: 0">
+                {{ t('cookie.desc') }}
+                <a :href="detailUrl" target="_blank" rel="noopener noreferrer">
+                  {{ t('cookie.about') }}
+                </a>
+              </p>
+              <template v-else>
+                <p class="cookie-title">{{ t('cookie.title', [community]) }}</p>
+                <p class="cookie-desc">
+                  {{ t('cookie.desc') }}
+                  <a :href="detailUrl" target="_blank" rel="noopener noreferrer">{{ t('cookie.about') }} </a>.
+                </p>
+              </template>
+            </div>
+            <div v-if="!isZh" class="cookie-notice-right">
+              <el-button round type="primary" @click="acceptAll">{{ t('cookie.acceptAll') }}</el-button>
+              <el-button round type="primary" @click="rejectAll">{{ t('cookie.rejectAll') }}</el-button>
+              <el-button round type="primary" @click="toggleDlgVisible(true)">{{ t('cookie.manage') }}</el-button>
+            </div>
+            <el-icon class="cookie-notice-close" :type="locale" @click="toggleNoticeVisible(false)">
+              <slot name="close-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z" /></svg>
+              </slot>
+            </el-icon>
+          </div>
+        </div>
+        <el-dialog v-model="isDlgVisible" :width="lePadV ? '90%' : '50%'" :title="t('cookie.manage')" destroy-on-close @open="onDlgOpening">
+          <div class="cookie-dlg-content">
+            <div class="content-item">
+              <div class="item-header">
+                <span class="item-title">{{ t('cookie.necessaryCookie') }}</span>
+                <span class="item-extra">{{ t('cookie.alwaysOn') }}</span>
+              </div>
+              <div class="item-detail">
+                {{ t('cookie.necessaryCookieDetail') }}
+              </div>
+            </div>
+            <div class="content-item">
+              <div class="item-header">
+                <span class="item-title">{{ t('cookie.analyticalCookie') }}</span>
+                <span class="item-extra">
+                  <el-switch v-model="analysisAllowed" />
+                </span>
+              </div>
+              <div class="item-detail">
+                {{ t('cookie.analyticalCookieDetail') }}
+              </div>
+            </div>
+          </div>
+          <template #footer>
+            <el-button round type="primary" @click="handleSave" style="margin-right: 16px">{{ t('cookie.saveSetting') }}</el-button>
+            <el-button round type="primary" @click="handleAllowAll">{{ t('cookie.acceptAll') }}</el-button>
+          </template>
+        </el-dialog>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<style lang="scss" scoped>
+.el-button {
+  --el-button-bg-color: transparent;
+  --el-button-text-color: var(--o-color-primary1);
+  --el-button-border-color: var(--o-color-primary1);
+  --el-button-hover-bg-color: var(--o-color-primary1);
+}
+
+.cookie-notice {
+  position: fixed;
+  bottom: 0;
+  z-index: 999;
+  width: 100%;
+  --el-color-primary: var(--o-color-primary1);
+  .o-button {
+    --o-button-font-size-mini: 14px;
+  }
+  .o-button + .o-button {
+    margin-left: 16px;
+
+    @media (max-width: 840px) {
+      margin-left: 0;
+      margin-top: 12px;
+    }
+  }
+}
+
+.cookie-notice-content {
+  background-color: rgba(var(--o-mixedgray-1), 0.9);
+  backdrop-filter: blur(5px);
+  box-shadow: var(--o-shadow-1);
+}
+
+.cookie-notice-wrap {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  padding: 24px var(--layout-content-padding);
+  max-width: var(--layout-content-max-width);
+  &:not([type='zh']) {
+    @media (max-width: 840px) {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.cookie-notice-wrap-grid {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  width: var(--grid-content-width);
+  padding: 24px 0;
+  margin: 0 auto;
+  @media (max-width: 840px) {
+    padding: 16px 0;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.cookie-notice-left {
+  width: 60%;
+
+  @media (max-width: 1100px) {
+    width: 58%;
+  }
+
+  @media (max-width: 840px) {
+    width: 100%;
+  }
+
+  .cookie-title {
+    font-size: 16px;
+    line-height: 28px;
+    color: var(--o-color-info1);
+    font-weight: 500;
+    @media (max-width: 840px) {
+      font-size: 16px;
+      line-height: 24px;
+      text-align: center;
+    }
+  }
+
+  .cookie-desc {
+    font-size: 12px;
+    line-height: 18px;
+    color: var(--o-color-info2);
+    margin-top: 8px;
+  }
+}
+
+.cookie-notice-right {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+
+  @media (max-width: 840px) {
+    width: 100%;
+  }
+
+  @media (max-width: 840px) {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .el-button:not(:first-child) {
+    margin-left: 16px;
+  }
+
+  @media (max-width: 840px) {
+    .el-button {
+      align-self: stretch;
+      &:not(:first-child) {
+        margin-top: 12px;
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.cookie-notice-close {
+  &[type='en'] {
+    position: absolute;
+    top: 16px;
+    right: var(--layout-content-padding);
+    transform-origin: center;
+  }
+  cursor: pointer;
+  color: var(--o-color-info1);
+  font-size: 20px;
+  &:hover {
+    color: var(--o-color-primary2);
+  }
+  @media (max-width: 840px) {
+    font-size: 14px;
+  }
+  @include x-svg-hover;
+}
+
+.cookie-dlg-content {
+  .content-item + .content-item {
+    margin-top: 24px;
+  }
+
+  .content-item {
+    .item-header {
+      display: flex;
+      align-items: center;
+      .item-title {
+        font-size: 18px;
+        line-height: 32px;
+        color: var(--o-color-info1);
+        font-weight: 500;
+      }
+
+      .item-extra {
+        font-size: 14px;
+        line-height: 22px;
+        color: var(--o-color-info3);
+        margin-left: 24px;
+      }
+    }
+
+    .item-detail {
+      font-size: 16px;
+      line-height: 28px;
+      color: var(--o-color-info2);
+      margin-top: 12px;
+      @media (max-width: 840px) {
+        font-size: 14px;
+        line-height: 21px;
+        margin-top: 8px;
+      }
+    }
+  }
+}
+
+:deep(.el-dialog) {
+  .el-dialog__header {
+    text-align: center;
+  }
+  .el-dialog__title {
+    font-size: 32px;
+    @media (max-width: 840px) {
+      font-size: 22px;
+    }
+  }
+  .el-dialog__footer {
+    text-align: center;
+    @media (max-width: 840px) {
+      .o-button {
+        margin: 0 8px;
+      }
+    }
+  }
+}
+</style>