OTimelien
+OTimeline
@@ -60,13 +70,13 @@ list.value = initList();
{{ brand.name }}
- ![]()
+ ![]()
@@ -119,6 +129,9 @@ list.value = initList();
font-size: var(--o-font-size-text);
font-weight: 400;
line-height: var(--o-line-height-text);
+ @media (max-width: 768px) {
+ max-width: 80px;
+ }
}
&-item:hover {
background-color: var(--o-color-brand);
@@ -131,6 +144,7 @@ list.value = initList();
max-width: 1504px;
@media (max-width: 1100px) {
padding: 0 var(--o-spacing-h5);
+ margin: var(--o-spacing-h2) auto;
}
&-title {
font-size: var(--o-font-size-h3);
@@ -139,6 +153,10 @@ list.value = initList();
line-height: var(--o-line-height-h3);
width: 100%;
text-align: center;
+ @media (max-width: 768px) {
+ font-size: var(--o-font-size-h8);
+ line-height: var(--o-line-height-h8);
+ }
}
&-word {
@@ -147,6 +165,11 @@ list.value = initList();
color: var(--o-color-text2);
line-height: var(--o-line-height-h7);
margin-top: var(--o-spacing-h10);
+ @media (max-width: 768px) {
+ font-size: var(--o-font-size-tip);
+ line-height: var(--o-line-height-tip);
+ margin-top: var(--o-spacing-h5);
+ }
}
&-list {
@@ -161,8 +184,14 @@ list.value = initList();
&-item {
width: 100%;
- padding: var(--o-spacing-h10);
+ padding: 0;
max-width: 336px;
+ :deep(.el-card__body) {
+ padding: var(--o-spacing-h4);
+ @media (max-width: 768px) {
+ padding: var(--o-spacing-h5) var(--o-spacing-h6);
+ }
+ }
&-title {
font-size: var(--o-font-size-h7);
@@ -170,6 +199,10 @@ list.value = initList();
color: var(--o-color-text2);
line-height: var(--o-line-height-h7);
margin-top: var(--o-spacing-h10);
+ @media (max-width: 768px) {
+ font-size: var(--o-font-size-text);
+ line-height: var(--o-line-height-text);
+ }
}
&-img {
height: 120px;
@@ -179,8 +212,15 @@ list.value = initList();
align-items: center;
justify-content: center;
img {
- max-width: 100%;
- max-height: 100%;
+ object-fit: contain;
+ max-width: 220px;
+ height: 100%;
+ @media (max-width: 768px) {
+ max-width: 240px;
+ }
+ }
+ @media (max-width: 768px) {
+ height: 80px;
}
}
}
@@ -196,6 +236,10 @@ list.value = initList();
line-height: var(--o-line-height-h3);
width: 100%;
text-align: center;
+ @media (max-width: 768px) {
+ font-size: var(--o-font-size-h8);
+ line-height: var(--o-line-height-h8);
+ }
}
}
}
@@ -209,6 +253,10 @@ list.value = initList();
align-items: center;
grid-template-columns: repeat(4, 1fr);
grid-gap: var(--o-spacing-h4);
+ @media (max-width: 768px) {
+ font-size: var(--o-font-size-h8);
+ line-height: var(--o-line-height-h8);
+ }
}
&-item {
width: 100%;
@@ -232,6 +280,13 @@ list.value = initList();
}
}
+@media (max-width: 980px) {
+ .ppt-list,
+ .brand-list {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
@media (max-width: 768px) {
.ppt-list,
.brand-list {
diff --git a/app/.vitepress/src/views/download/TheDownload.vue b/app/.vitepress/src/views/download/TheDownload.vue
index 6b3d7ce8c0fdefad86a5e14766ec5d351d8bf50e..60e3db227928670aa0197ee527dfd9d201f43c15 100644
--- a/app/.vitepress/src/views/download/TheDownload.vue
+++ b/app/.vitepress/src/views/download/TheDownload.vue
@@ -56,6 +56,19 @@ const urlStyle = computed(() => {
:title="i18n.download.OUTSIDE_TITLE"
/>
+
+
+
+
{
- {
/>
-
-
+
diff --git a/app/.vitepress/src/views/download/TheMirSelect.vue b/app/.vitepress/src/views/download/TheMirSelect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5bada038e2bef4da3180614c990e10768e5a57d8
--- /dev/null
+++ b/app/.vitepress/src/views/download/TheMirSelect.vue
@@ -0,0 +1,386 @@
+
+
+
+
+
+
+
+
+
+
+ {{
+ scope.row.url
+ }}
+
+
+
+
+
+
+
+
+
diff --git a/app/.vitepress/src/views/home/CommunityActivity.vue b/app/.vitepress/src/views/home/CommunityActivity.vue
index de1f02065c98214ecb84bd532de5584592a162f4..e77253c29d842e52aa84f45bda3808a9c61fb8f5 100644
--- a/app/.vitepress/src/views/home/CommunityActivity.vue
+++ b/app/.vitepress/src/views/home/CommunityActivity.vue
@@ -132,7 +132,10 @@ const { theme: i18n } = useData();
.community {
max-width: 1504px;
margin: 0 auto;
- padding: 0;
+ padding: 0 var(--o-spacing-h2);
+ @media (max-width: 1100px) {
+ padding: 0 var(--o-spacing-h5);
+ }
margin-top: var(--o-spacing-h1);
@media (max-width: 768px) {
margin-top: var(--o-spacing-h2);
diff --git a/app/.vitepress/src/views/home/ImgCarousel.vue b/app/.vitepress/src/views/home/ImgCarousel.vue
index 7144e900a74c8f384dae7a7bdca4b0478ddf53a9..6f9f40416c3008c2b197f45c1171bbc3154799da 100644
--- a/app/.vitepress/src/views/home/ImgCarousel.vue
+++ b/app/.vitepress/src/views/home/ImgCarousel.vue
@@ -2,21 +2,32 @@
import { useData } from 'vitepress';
import { ref } from 'vue';
import IconArrowRight from '~icons/app/arrow-right.svg';
-import IconDown from '~icons/app/icon-down.svg';
+import useWindowResize from '@/components/hooks/useWindowResize';
+
+const screenWidth = useWindowResize();
const { theme: i18n } = useData();
const active = ref(0);
+const activeMobile = ref(0);
+
const changeActive = (index: number) => {
active.value = index;
+ activeMobile.value = index;
+};
+
+const changeActiveMobile = (activeNames: any) => {
+ if (activeNames !== '') {
+ active.value = activeNames;
+ }
};
+ {{ i18n.download.MIRROR_SELECT.CONTENT[0] + }}{{ ipAndAsn.length ? ipAndAsn[0] : '' }}{{ i18n.download.MIRROR_SELECT.CONTENT[1] }} + {{ ipAndAsn.length ? ipAndAsn[1] : '' }}{{ i18n.download.MIRROR_SELECT.CONTENT[2] + }}{{ area }}{{ i18n.download.MIRROR_SELECT.CONTENT[3] }} +
+
+ ![]()
{{
+ scope.row.name
+ }}
+
+
+
+
+
+
+
+
+
+ {{ i18n.download.MIRROR_SELECT.RANK }}
+
+ {{ index + 1 }}
+
+ ![]()
+
+
+ {{ i18n.download.MIRROR_SELECT.NAME }}
+
+ {{ item.name }}
+
+
+
+ {{ i18n.download.MIRROR_SELECT.URL }}
+
+
+ {{ item.url }}
+
+
+
+
+
+ {{ i18n.download.MIRROR_SELECT.COUNTRY }}
+
+ {{ item.country }}
+
+
+
+ {{ i18n.download.MIRROR_SELECT.CONTINENT }}
+
+ {{ item.continent }}
+
+
+
+ {{ i18n.download.MIRROR_SELECT.DISTANCE }}
+
+ {{ item.distance }}
+ {{ i18n.home.IMG_CAROUSE.TITLE }}
-
+
-
@@ -30,34 +41,42 @@ const changeActive = (index: number) => {
- ![]()
+ ![]()
-
@@ -65,7 +84,10 @@ const changeActive = (index: number) => {
.carousel {
max-width: 1504px;
margin: 0 auto;
- padding: 0;
+ padding: 0 var(--o-spacing-h2);
+ @media (max-width: 1100px) {
+ padding: 0 var(--o-spacing-h5);
+ }
h3 {
font-size: var(--o-font-size-h3);
font-weight: 300;
@@ -83,18 +105,25 @@ const changeActive = (index: number) => {
&-mobile {
margin-top: var(--o-spacing-h5);
- display: none;
- @media (max-width: 1080px) {
- display: flex;
- flex-flow: column;
- }
+
+ flex-flow: column;
+
&-card {
- :deep(.el-card__body) {
+ :deep(.el-collapse-item__content) {
+ padding-bottom: 0px;
+ }
+
+ :deep(.el-collapse-item__header) {
+ height: 100%;
padding: var(--o-spacing-h4);
@media (max-width: 768px) {
padding: var(--o-spacing-h8);
}
}
+
+ :deep(.el-collapse-item__wrap) {
+ margin: var(--o-spacing-h5) 0;
+ }
}
&-content {
@@ -106,7 +135,8 @@ const changeActive = (index: number) => {
&-img {
width: 100%;
- margin: var(--o-spacing-h5) 0;
+ height: 100%;
+
img {
width: 100%;
height: 100%;
@@ -115,6 +145,7 @@ const changeActive = (index: number) => {
}
&-title {
+ cursor: pointer;
font-size: var(--o-font-size-h5);
font-weight: 500;
color: var(--o-color-text2);
@@ -132,9 +163,7 @@ const changeActive = (index: number) => {
}
&-pc {
margin-top: var(--o-spacing-h2);
- @media (max-width: 1080px) {
- display: none;
- }
+
&-card {
:deep(.el-card__body) {
padding: var(--o-spacing-h1) var(--o-spacing-h1) var(--o-spacing-h2);
@@ -177,6 +206,7 @@ const changeActive = (index: number) => {
}
&-title {
+ cursor: pointer;
font-size: var(--o-font-size-h4);
font-weight: 400;
color: var(--o-color-text2);
@@ -191,15 +221,37 @@ const changeActive = (index: number) => {
&-button {
display: flex;
- flex-flow: row;
+ margin-top: var(--o-line-height-h3);
justify-content: center;
align-items: center;
- margin-top: var(--o-spacing-h2);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: var(--o-color-text2);
+ transition: all 0.3s;
+
&-icon {
+ margin-left: var(--o-spacing-h8);
width: var(--o-font-size-h8);
height: var(--o-font-size-h8);
+ transition: all 0.3s;
color: var(--o-color-brand);
- margin-left: var(--o-spacing-h8);
+ }
+
+ a {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: var(--o-color-text2);
+ transition: all 0.3s;
+ &:hover {
+ color: var(--o-color-brand);
+ .carousel-pc-button-icon {
+ transform: translateX(3px);
+ }
+ }
}
}
}
diff --git a/app/.vitepress/src/views/home/UserCase.vue b/app/.vitepress/src/views/home/UserCase.vue
index 6d695ea7e3e8a1cd5140cdeed256dfd1968dc84d..1eba531b681715eb8d6932ce429ef71fd03d889f 100644
--- a/app/.vitepress/src/views/home/UserCase.vue
+++ b/app/.vitepress/src/views/home/UserCase.vue
@@ -2,50 +2,69 @@
import { useData } from 'vitepress';
import { useCommon } from '@/stores/common';
import IconArrowRight from '~icons/app/arrow-right.svg';
-import IconDown from '~icons/app/icon-down.svg';
import { ref } from 'vue';
+import useWindowResize from '@/components/hooks/useWindowResize';
const { theme: i18n } = useData();
const commonStore = useCommon();
const active = ref(0);
+const activeMobile = ref(0);
+
+const screenWidth = useWindowResize();
const changeActive = (index: number) => {
active.value = index;
+ activeMobile.value = index;
+};
+
+const changeActiveMobile = (activeNames: any) => {
+ if (activeNames !== '') {
+ active.value = activeNames;
+ }
};
-
+
+
+
-
+
+
{{ item.TITLE }}
-
- ![]()
+
+
-
+ ![]()
- {{ i18n.home.USER_CASE.TITLE }}
-
-
+
-
+
![]()
-
-
-
-
- {{ item.TYPE }}
+
+ {{ item.TYPE }}
+
+
+
-
-
@@ -53,24 +72,28 @@ const changeActive = (index: number) => {
{{ user.WORD }}
+
+
+
![]()
-
@@ -111,15 +136,25 @@ h3 {
}
}
.case-mobile {
- display: none;
@media (max-width: 1080px) {
- display: block;
+ border-top: none;
}
&-list {
margin-top: var(--o-spacing-h4);
@media (max-width: 768px) {
- margin-top: 0;
+ margin-top: var(--o-spacing-h5);
+ }
+ :deep(.el-collapse-item__content) {
+ padding-bottom: 0px;
+ }
+
+ :deep(.el-collapse-item__header) {
+ height: 100%;
+ padding: var(--o-spacing-h5);
+ @media (max-width: 768px) {
+ padding: var(--o-spacing-h8);
+ }
}
}
@@ -159,13 +194,6 @@ h3 {
justify-content: space-between;
align-items: center;
}
-
- :deep(.el-card__body) {
- padding: var(--o-spacing-h5);
- @media (max-width: 768px) {
- padding: var(--o-spacing-h8);
- }
- }
}
&-icon {
@@ -182,6 +210,7 @@ h3 {
}
}
&-card {
+ cursor: pointer;
padding: var(--o-spacing-h5);
width: 100%;
background: var(--o-color-bg2);
@@ -233,23 +262,44 @@ h3 {
&-main {
max-width: 1504px;
margin: 0 auto;
- padding: 0;
- }
- display: block;
- @media (max-width: 1080px) {
- display: none;
+ padding: 0 var(--o-spacing-h2);
+ @media (max-width: 1100px) {
+ padding: 0 var(--o-spacing-h5);
+ }
}
&-more {
display: flex;
- flex-flow: row;
+ margin-top: var(--o-line-height-h3);
justify-content: center;
align-items: center;
- margin-top: var(--o-spacing-h2);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: var(--o-color-text2);
+ transition: all 0.3s;
+
&-icon {
+ margin-left: var(--o-spacing-h8);
width: var(--o-font-size-h8);
height: var(--o-font-size-h8);
+ transition: all 0.3s;
color: var(--o-color-brand);
- margin-left: var(--o-spacing-h8);
+ }
+
+ a {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: var(--o-color-text2);
+ transition: all 0.3s;
+ &:hover {
+ color: var(--o-color-brand);
+ .case-more-icon {
+ transform: translateX(3px);
+ }
+ }
}
}
@@ -289,6 +339,7 @@ h3 {
justify-content: center;
align-items: center;
&-item {
+ cursor: pointer;
display: flex;
flex-flow: column;
justify-content: center;
diff --git a/app/zh/mirror/select/index.md b/app/zh/mirror/select/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..b542c94bb234db982a1a9402695cb968f39c4a78
--- /dev/null
+++ b/app/zh/mirror/select/index.md
@@ -0,0 +1,5 @@
+
+
+
+
@@ -78,7 +101,7 @@ const changeActive = (index: number) => {
{{ item.TYPE }}
@@ -87,8 +110,10 @@ const changeActive = (index: number) => {
- {{ i18n.home.USER_CASE.VIEW_MORE }}
-
+
{leftArrow && leftArrow.value ? (
onClickLeft()}
+ class="o-timeline-left-arrow"
+ onClick={onClickLeft}
>
) : (
''
)}
-
-
+
- onClick(index)}
+ onClick={() => onClick(index)}
>
-
{item}
+{item}
{index === activeTab.value ? ( -+ ) : ( - + )}
);
@@ -119,8 +121,8 @@ export default defineComponent({
-
{timeList.value.map((item, index) => {
return (