Skip to content

V
VueJS_637753

闫辉 / VueJS_637753
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 0
Fork 0
V
VueJS_637753
提交 6c64dffa 编写于 作者: S superyan
浏览文件
操作

Mon Sep 2 14:50:00 CST 2024 inscode

上级 79c5bd79
隐藏空白更改
内联 并排
Showing with 1672 addition and 41 deletion
src/App.vue
浏览文件 @ 6c64dffa
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>
<template> <template>
<header> <div id="app">
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> <SearchPage v-if="currentPage === 'search'" @search="handleSearch" />
<ResultsPage v-else :searchQuery="searchQuery" @back="goToSearch" />
<div class="wrapper"> </div>
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template> </template>
<style scoped> <script>
header { import SearchPage from './components/SearchPage.vue';
line-height: 1.5; import ResultsPage from './components/ResultsPage.vue';
}
export default {
.logo { name: 'App',
display: block; components: {
margin: 0 auto 2rem; SearchPage,
} ResultsPage
},
@media (min-width: 1024px) { data() {
header { return {
display: flex; currentPage: 'search',
place-items: center; searchQuery: ''
padding-right: calc(var(--section-gap) / 2); };
} },
methods: {
.logo { handleSearch(query) {
margin: 0 2rem 0 0; this.searchQuery = query;
this.currentPage = 'results';
},
goToSearch() {
this.currentPage = 'search';
}
} }
};
</script>
header .wrapper { <style>
display: flex; #app {
place-items: flex-start; font-family: Arial, sans-serif;
flex-wrap: wrap;
}
} }
</style> </style>
\ No newline at end of file
src/components/ResultsPage.vue 0 → 100644
浏览文件 @ 6c64dffa
<template>
<div class="page flex-col">
<div class="block_1 flex-col">
<!-- Status bar -->
<div class="group_1 flex-row">
<span class="text_1">9:41</span>
<div class="group_2 flex-col"></div>
<div class="group_3 flex-col"></div>
<img
class="image_1"
src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd25660d878c1c723ef4b6d3179f8fc88.png"
/>
</div>
<!-- Header -->
<div class="group_4 flex-row">
<div class="group_5 flex-row">
<img
class="thumbnail_1"
src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG715af45decd916ba1800cb4e2a7551c7.png"
/>
<span class="text_2">iAON AI Search</span>
<img
class="thumbnail_2"
src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG3a72b01e44112e9b2907ba6d3ce1405f.png"
/>
<div class="group_6 flex-col"></div>
<div class="group_7 flex-col"></div>
</div>
</div>
<!-- Search query -->
<div class="text-wrapper_1 flex-row">
<span class="text_3">{{ searchQuery }}</span>
</div>
</div>
<!-- Search results -->
<div class="block_2 flex-col">
<!-- Result items -->
<div v-for="(result, index) in searchResults" :key="index" class="block_9 flex-row justify-between">
<div class="box_4 flex-col">
<div class="text-wrapper_3 flex-row justify-between">
<span class="text_6">{{ index + 1 }}.</span>
<span class="text_7">{{ result.title }}</span>
</div>
<span class="text_8">{{ result.description }}</span>
<div class="section_4 flex-row justify-between">
<div class="group_16 flex-col"></div>
<span class="text_9">{{ result.url }}</span>
</div>
</div>
</div>
</div>
<!-- Back button -->
<div class="block_14 flex-col" @click="goBack">
<span>Back to Search</span>
</div>
</div>
</template>
<script>
export default {
props: {
searchQuery: {
type: String,
required: true
}
},
data() {
return {
searchResults: [
{
title: '自己动手实现一个AI搜索引擎！ 原创',
description: '2024年4月11日 — 首先，我们定义一个Tools 类，该blog.csdn.net',
url: 'blog.csdn.net'
},
// Add more mock results here
]
};
},
methods: {
goBack() {
this.$emit('back');
}
}
};
</script>
<style scoped>
.page {
background-color: rgba(255, 255, 255, 1);
position: relative;
width: 375px;
height: 1252px;
overflow: hidden;
}
.block_1 {
width: 375px;
height: 89px;
}
.group_1 {
width: 341px;
height: 18px;
margin: 15px 0 0 21px;
}
.text_1 {
width: 54px;
height: 18px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 15px;
letter-spacing: -0.30000001192092896px;
font-family: SF Pro Text-Semibold;
font-weight: 600;
text-align: center;
white-space: nowrap;
line-height: 15px;
}
.group_2 {
background-color: rgba(25, 33, 61, 1);
width: 17px;
height: 11px;
margin: 3px 0 0 219px;
}
.group_3 {
background-color: rgba(25, 33, 61, 1);
width: 16px;
height: 11px;
margin: 3px 0 0 5px;
}
.image_1 {
width: 25px;
height: 12px;
margin: 3px 0 0 5px;
}
.group_4 {
width: 375px;
height: 44px;
margin-top: 11px;
}
.group_5 {
background-color: rgba(255, 255, 255, 1);
position: relative;
width: 375px;
height: 44px;
}
.thumbnail_1 {
width: 9px;
height: 18px;
margin: 13px 0 0 18px;
}
.text_2 {
width: 118px;
height: 22px;
overflow-wrap: break-word;
color: rgba(28, 28, 40, 1);
font-size: 16px;
font-family: PingFang SC-Medium;
font-weight: 500;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin: 11px 0 0 105px;
}
.thumbnail_2 {
width: 15px;
height: 15px;
margin: 15px 20px 0 90px;
}
.group_6 {
position: absolute;
left: 12px;
top: 10px;
width: 24px;
height: 24px;
}
.group_7 {
position: absolute;
left: 335px;
top: 10px;
width: 24px;
height: 24px;
}
.text-wrapper_1 {
width: 119px;
height: 16px;
margin: 252px 0 0 387px;
}
.text_3 {
width: 119px;
height: 16px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 12px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.text-wrapper_2 {
width: 75px;
height: 16px;
margin: 28px 0 311px 394px;
}
.text_4 {
width: 75px;
height: 16px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 12px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.block_2 {
position: relative;
width: 375px;
height: 724px;
margin-top: -1px;
}
.block_3 {
width: 343px;
height: 20px;
margin: 10px 0 0 16px;
}
.group_8 {
background-color: rgba(25, 33, 61, 1);
height: 16px;
margin-top: 2px;
width: 16px;
}
.box_1 {
width: 16px;
height: 16px;
}
.group_9 {
border-radius: 9999px;
height: 16px;
width: 16px;
margin: 2px 0 0 16px;
}
.group_10 {
width: 16px;
height: 16px;
}
.text_5 {
width: 71px;
height: 16px;
overflow-wrap: break-word;
color: rgba(102, 111, 141, 1);
font-size: 12px;
font-family: Inter-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 2px 0 0 4px;
}
.image-text_1 {
width: 50px;
height: 20px;
margin-left: 134px;
}
.text-group_1 {
width: 26px;
height: 16px;
overflow-wrap: break-word;
color: rgba(102, 111, 141, 1);
font-size: 14px;
font-family: Inter-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin-top: 2px;
}
.block_4 {
height: 20px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd1a05d06d5bf2038ff730ba374addebd.png)
100% no-repeat;
background-size: 100% 100%;
width: 20px;
}
.box_2 {
width: 20px;
height: 20px;
}
.thumbnail_3 {
width: 16px;
height: 16px;
margin: 2px 0 0 20px;
}
.image-text_2 {
width: 223px;
height: 16px;
margin: 46px 0 0 24px;
}
.text-group_2 {
width: 199px;
height: 16px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 20px;
font-family: PingFang SC-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.group_11 {
height: 16px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGebeabcfa51788d9430b2fed9bb06231e.png)
100% no-repeat;
background-size: 100% 100%;
width: 16px;
}
.section_1 {
width: 16px;
height: 16px;
}
.block_5 {
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
width: 327px;
height: 40px;
border: 1px solid rgba(31, 41, 55, 0.2);
margin: 32px 0 0 24px;
}
.image-text_3 {
width: 76px;
height: 16px;
margin: 12px 0 0 10px;
}
.group_12 {
height: 16px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG78539a1e9526a07cde055bc06cabf62c.png)
100% no-repeat;
background-size: 100% 100%;
width: 16px;
}
.group_13 {
width: 16px;
height: 16px;
}
.text-group_3 {
width: 56px;
height: 16px;
overflow-wrap: break-word;
color: rgba(35, 136, 255, 1);
font-size: 14px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.image-text_4 {
width: 62px;
height: 16px;
margin: 12px 12px 0 167px;
}
.text-group_4 {
width: 42px;
height: 16px;
overflow-wrap: break-word;
color: rgba(102, 111, 141, 1);
font-size: 14px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: right;
white-space: nowrap;
line-height: 16px;
}
.section_2 {
height: 16px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGc77fd008f61f10d37f1bac402b859816.png)
100% no-repeat;
background-size: 100% 100%;
width: 16px;
}
.box_3 {
width: 16px;
height: 16px;
}
.block_6 {
width: 327px;
height: 32px;
margin: 32px 0 0 24px;
}
.image-text_5 {
width: 68px;
height: 24px;
margin-top: 4px;
}
.group_14 {
height: 20px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGb67f7982758f36300e4b8b3e55e78a30.png)
100% no-repeat;
background-size: 100% 100%;
margin-top: 2px;
width: 20px;
}
.section_3 {
width: 20px;
height: 20px;
}
.text-group_5 {
width: 40px;
height: 24px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 20px;
font-family: PingFang SC-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 24px;
}
.block_7 {
box-shadow: 0px 1px 3px 0px rgba(25, 33, 61, 0.1);
background-color: rgba(247, 248, 250, 1);
border-radius: 4px;
width: 68px;
height: 32px;
}
.image-text_6 {
width: 44px;
height: 24px;
margin: 4px 0 0 12px;
}
.block_8 {
height: 12px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGc8c8d7ebeb5d51e1d41f77e7362e2d31.png)
100% no-repeat;
background-size: 100% 100%;
margin-top: 6px;
width: 12px;
}
.group_15 {
width: 12px;
height: 12px;
}
.text-group_6 {
width: 28px;
height: 24px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 14px;
font-family: PingFang SC-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 24px;
}
.block_9 {
width: 330px;
height: 76px;
margin: 16px 0 0 24px;
}
.box_4 {
border-radius: 8px;
width: 161px;
height: 76px;
border: 1px solid rgba(31, 41, 55, 0.2);
justify-content: flex-center;
}
.text-wrapper_3 {
width: 132px;
height: 16px;
margin: 8px 0 0 12px;
}
.text_6 {
width: 9px;
height: 16px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 12px;
font-family: PingFang SC-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.text_7 {
width: 119px;
height: 16px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 12px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.text_8 {
width: 135px;
height: 16px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 12px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 4px 0 0 12px;
}
.section_4 {
width: 95px;
height: 16px;
margin: 8px 0 8px 12px;
}
.group_16 {
background-color: rgba(190, 190, 190, 1);
border-radius: 50%;
width: 16px;
height: 16px;
}
.text_9 {
width: 75px;
height: 16px;
overflow-wrap: break-word;
color: rgba(102, 111, 141, 1);
font-size: 12px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.box_5 {
border-radius: 8px;
width: 161px;
height: 76px;
border: 1px solid rgba(31, 41, 55, 0.2);
justify-content: flex-center;
}
.text-wrapper_4 {
width: 132px;
height: 16px;
margin: 8px 0 0 12px;
}
.text_10 {
width: 9px;
height: 16px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 12px;
font-family: PingFang SC-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.text_11 {
width: 119px;
height: 16px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 12px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.text_12 {
width: 135px;
height: 16px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 12px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 4px 0 0 12px;
}
.box_6 {
width: 95px;
height: 16px;
margin: 8px 0 8px 12px;
}
.box_7 {
background-color: rgba(190, 190, 190, 1);
border-radius: 50%;
width: 16px;
height: 16px;
}
.text_13 {
width: 75px;
height: 16px;
overflow-wrap: break-word;
color: rgba(102, 111, 141, 1);
font-size: 12px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.block_10 {
width: 68px;
height: 24px;
margin: 32px 0 0 24px;
}
.block_11 {
height: 20px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGa279b22da3cb5c7ccbdd237125f3bf9e.png)
100% no-repeat;
background-size: 100% 100%;
margin-top: 2px;
width: 20px;
}
.block_12 {
width: 20px;
height: 20px;
}
.text_14 {
width: 40px;
height: 24px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 20px;
font-family: PingFang SC-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 24px;
}
.paragraph_1 {
width: 327px;
height: 540px;
overflow-wrap: break-word;
color: rgba(53, 62, 92, 1);
font-size: 15px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: justified;
line-height: 30px;
margin: 16px 0 208px 24px;
}
.block_13 {
border-radius: 8px;
position: absolute;
left: 362px;
top: 244px;
width: 161px;
height: 76px;
border: 1px solid rgba(31, 41, 55, 0.2);
justify-content: flex-center;
}
.text_15 {
width: 9px;
height: 16px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 12px;
font-family: PingFang SC-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 8px 0 0 12px;
}
.text_16 {
width: 135px;
height: 16px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 12px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 4px 0 0 12px;
}
.box_8 {
background-color: rgba(190, 190, 190, 1);
border-radius: 50%;
width: 16px;
height: 16px;
margin: 8px 0 8px 12px;
}
.block_14 {
width: 376px;
height: 376px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGdaa982ba4073f99f46823e930dcb9ae6.png)
100% no-repeat;
background-size: 100% 100%;
margin: 240px 0 176px 0;
}
.block_15 {
position: absolute;
left: 0;
top: 877px;
width: 375px;
height: 375px;
}
.image-wrapper_1 {
width: 327px;
height: 16px;
margin: 175px 0 0 24px;
}
.thumbnail_4 {
width: 16px;
height: 16px;
}
.thumbnail_5 {
width: 16px;
height: 16px;
margin-left: 20px;
}
.thumbnail_6 {
width: 16px;
height: 16px;
margin-left: 20px;
}
.thumbnail_7 {
width: 16px;
height: 16px;
margin-left: 79px;
}
.thumbnail_8 {
width: 16px;
height: 16px;
margin-left: 20px;
}
.thumbnail_9 {
width: 16px;
height: 16px;
margin-left: 20px;
}
.thumbnail_10 {
width: 16px;
height: 16px;
margin-left: 20px;
}
.thumbnail_11 {
width: 16px;
height: 16px;
margin-left: 20px;
}
.group_17 {
height: 88px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG1438c74786cc6f058e8ffae25f03f4ce.png)
100% no-repeat;
background-size: 100% 100%;
width: 337px;
margin: 58px 0 0 19px;
}
.text-wrapper_5 {
width: 28px;
height: 16px;
margin: 10px 0 0 12px;
}
.text_17 {
width: 28px;
height: 16px;
overflow-wrap: break-word;
color: rgba(186, 192, 204, 1);
font-size: 14px;
font-family: Inter-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.block_16 {
width: 72px;
height: 28px;
margin: 30px 0 4px 254px;
}
.box_9 {
background-color: rgba(25, 33, 61, 1);
height: 12px;
margin-top: 9px;
width: 13px;
}
.block_17 {
width: 12px;
height: 12px;
}
.box_10 {
box-shadow: 0px 2px 5px 0px rgba(20, 88, 201, 0.17);
background-image: linear-gradient(
180deg,
rgba(43, 122, 251, 1) 0,
rgba(33, 116, 253, 1) 100%,
rgba(33, 59, 253, 1) 100%
);
border-radius: 8px;
height: 28px;
border: 1px gradient;
width: 44px;
position: relative;
}
.thumbnail_12 {
width: 12px;
height: 12px;
margin: 8px 0 0 16px;
}
.box_11 {
position: absolute;
left: 0;
top: 0;
width: 44px;
height: 28px;
}
.image-wrapper_2 {
background-color: rgba(255, 255, 255, 0.1);
height: 38px;
margin-left: 105px;
width: 166px;
}
.image_2 {
width: 134px;
height: 34px;
margin: 4px 0 0 16px;
}
/* Add your CSS styles here */
</style>
\ No newline at end of file
src/components/SearchPage.vue 0 → 100644
浏览文件 @ 6c64dffa
<template>
<div class="page flex-col">
<div class="group_1 flex-col"></div>
<div class="group_2 flex-col"></div>
<div class="group_3 flex-col justify-end">
<!-- Status bar -->
<div class="group_4 flex-row">
<span class="text_1">9:41</span>
<div class="box_1 flex-col"></div>
<div class="box_2 flex-col"></div>
<img
class="image_1"
src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd25660d878c1c723ef4b6d3179f8fc88.png"
/>
</div>
<!-- Header -->
<div class="group_5 flex-row">
<img
class="thumbnail_1"
src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG715af45decd916ba1800cb4e2a7551c7.png"
/>
<span class="text_2">iAON AI Search</span>
<img
class="thumbnail_2"
src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG3a72b01e44112e9b2907ba6d3ce1405f.png"
/>
<div class="block_1 flex-col"></div>
<div class="block_2 flex-col"></div>
</div>
<!-- Search input -->
<div class="group_12 flex-col">
<div class="text-wrapper_1 flex-row">
<input v-model="searchInput" class="text_6" placeholder="输入任何内容..." />
</div>
<div class="block_5 flex-row justify-between">
<div class="box_5 flex-col justify-center">
<div class="group_13 flex-col"></div>
</div>
<div class="box_6 flex-col">
<img
class="thumbnail_3"
src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGa3622f01b458c96a5a91b95a2bfd9714.png"
@click="search"
/>
<div class="group_14 flex-col"></div>
</div>
</div>
</div>
<!-- Search history -->
<div class="image-text_2 flex-row justify-between">
<div class="box_7 flex-col"><div class="box_8 flex-col"></div></div>
<span class="text-group_2">搜索历史</span>
</div>
<!-- Search history items -->
<div v-for="(item, index) in searchHistory" :key="index" class="group_15 flex-row justify-between">
<div class="box_9 flex-col">
<div class="section_1 flex-col">
<div class="group_16 flex-col"></div>
</div>
</div>
<span class="text_7">{{ item }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
searchInput: '',
searchHistory: [
'如何做一个Ai搜索引擎',
'有哪些比较好用的开源项目管理工具？',
'原型设计工具Axure、Figma、Pixso，哪个更好用？',
'如何在Windows和Linux系统中通过ollama部署qwen大语言模型，并实现open-webui的访问',
'搭建自己的GPT'
]
};
},
methods: {
search() {
if (this.searchInput.trim()) {
this.$emit('search', this.searchInput);
}
}
}
};
</script>
<style scoped>
.page {
background-color: rgba(255, 255, 255, 1);
position: relative;
width: 375px;
height: 812px;
overflow: hidden;
}
.group_1 {
width: 376px;
height: 376px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGdaa982ba4073f99f46823e930dcb9ae6.png)
100% no-repeat;
background-size: 100% 100%;
margin-top: 612px;
}
.group_2 {
position: absolute;
left: 0;
top: 437px;
width: 375px;
height: 375px;
}
.group_3 {
position: absolute;
left: 0;
top: 88px;
width: 375px;
height: 724px;
}
.group_4 {
width: 341px;
height: 18px;
margin: -73px 0 0 21px;
}
.text_1 {
width: 54px;
height: 18px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 15px;
letter-spacing: -0.30000001192092896px;
font-family: SF Pro Text-Semibold;
font-weight: 600;
text-align: center;
white-space: nowrap;
line-height: 15px;
}
.box_1 {
background-color: rgba(25, 33, 61, 1);
width: 17px;
height: 11px;
margin: 3px 0 0 219px;
}
.box_2 {
background-color: rgba(25, 33, 61, 1);
width: 16px;
height: 11px;
margin: 3px 0 0 5px;
}
.image_1 {
width: 25px;
height: 12px;
margin: 3px 0 0 5px;
}
.group_5 {
background-color: rgba(255, 255, 255, 1);
position: relative;
width: 375px;
height: 44px;
margin-top: 11px;
}
.thumbnail_1 {
width: 9px;
height: 18px;
margin: 13px 0 0 18px;
}
.text_2 {
width: 118px;
height: 22px;
overflow-wrap: break-word;
color: rgba(28, 28, 40, 1);
font-size: 16px;
font-family: PingFang SC-Medium;
font-weight: 500;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin: 11px 0 0 105px;
}
.thumbnail_2 {
width: 15px;
height: 15px;
margin: 15px 20px 0 90px;
}
.block_1 {
position: absolute;
left: 12px;
top: 10px;
width: 24px;
height: 24px;
}
.block_2 {
position: absolute;
left: 335px;
top: 10px;
width: 24px;
height: 24px;
}
.group_6 {
width: 343px;
height: 20px;
margin: 10px 0 0 16px;
}
.group_7 {
background-color: rgba(25, 33, 61, 1);
height: 16px;
margin-top: 2px;
width: 16px;
}
.block_3 {
width: 16px;
height: 16px;
}
.group_8 {
border-radius: 9999px;
height: 16px;
width: 16px;
margin: 2px 0 0 16px;
}
.group_9 {
width: 16px;
height: 16px;
}
.text_3 {
width: 71px;
height: 16px;
overflow-wrap: break-word;
color: rgba(102, 111, 141, 1);
font-size: 12px;
font-family: Inter-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 2px 0 0 4px;
}
.image-text_1 {
width: 50px;
height: 20px;
margin-left: 170px;
}
.text-group_1 {
width: 26px;
height: 16px;
overflow-wrap: break-word;
color: rgba(102, 111, 141, 1);
font-size: 14px;
font-family: Inter-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin-top: 2px;
}
.box_3 {
height: 20px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd1a05d06d5bf2038ff730ba374addebd.png)
100% no-repeat;
background-size: 100% 100%;
width: 20px;
}
.box_4 {
width: 20px;
height: 20px;
}
.group_10 {
width: 266px;
height: 32px;
margin: 90px 0 0 55px;
}
.group_11 {
height: 32px;
width: 32px;
}
.block_4 {
width: 32px;
height: 32px;
}
.text_4 {
width: 230px;
height: 32px;
overflow-wrap: break-word;
color: rgba(45, 126, 255, 1);
font-size: 32px;
letter-spacing: -0.8000000715255737px;
font-family: Inter-Extra Bold;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 32px;
}
.text_5 {
width: 343px;
height: 28px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 18px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 28px;
margin: 32px 0 0 16px;
}
.group_12 {
height: 102px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGde50877415a0a77992deb2aad2bb84ad.png)
100% no-repeat;
background-size: 100% 100%;
width: 339px;
margin: 36px 0 0 18px;
}
.text-wrapper_1 {
width: 96px;
height: 16px;
margin: 12px 0 0 12px;
}
.text_6 {
width: 96px;
height: 16px;
overflow-wrap: break-word;
color: rgba(186, 192, 204, 1);
font-size: 14px;
font-family: Inter-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
}
.block_5 {
width: 72px;
height: 28px;
margin: 42px 0 4px 255px;
}
.box_5 {
background-color: rgba(25, 33, 61, 1);
height: 12px;
margin-top: 9px;
width: 13px;
}
.group_13 {
width: 12px;
height: 12px;
}
.box_6 {
box-shadow: 0px 2px 5px 0px rgba(20, 88, 201, 0.17);
background-image: linear-gradient(
180deg,
rgba(43, 122, 251, 1) 0,
rgba(33, 116, 253, 1) 100%,
rgba(33, 59, 253, 1) 100%
);
border-radius: 8px;
height: 28px;
border: 1px gradient;
width: 44px;
position: relative;
}
.thumbnail_3 {
width: 12px;
height: 12px;
margin: 8px 0 0 16px;
}
.group_14 {
position: absolute;
left: 0;
top: 0;
width: 44px;
height: 28px;
}
.image-text_2 {
width: 108px;
height: 24px;
margin: 36px 0 0 24px;
}
.box_7 {
height: 20px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG25ea552c4bb821817684b6c731e663ca.png)
100% no-repeat;
background-size: 100% 100%;
margin-top: 2px;
width: 20px;
}
.box_8 {
width: 20px;
height: 20px;
}
.text-group_2 {
width: 80px;
height: 24px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 20px;
font-family: PingFang SC-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 24px;
}
.group_15 {
width: 179px;
height: 32px;
margin: 16px 0 0 24px;
}
.box_9 {
background-color: rgba(240, 242, 245, 1);
border-radius: 8px;
height: 32px;
width: 32px;
}
.section_1 {
height: 16px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
100% no-repeat;
background-size: 100% 100%;
width: 16px;
margin: 8px 0 0 8px;
}
.group_16 {
width: 16px;
height: 16px;
}
.text_7 {
width: 139px;
height: 24px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 14px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin-top: 4px;
}
.group_17 {
width: 278px;
height: 32px;
margin: 16px 0 0 24px;
}
.group_18 {
background-color: rgba(240, 242, 245, 1);
border-radius: 8px;
height: 32px;
width: 32px;
}
.section_2 {
height: 16px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
100% no-repeat;
background-size: 100% 100%;
width: 16px;
margin: 8px 0 0 8px;
}
.box_10 {
width: 16px;
height: 16px;
}
.text_8 {
width: 238px;
height: 24px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 14px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin-top: 4px;
}
.group_19 {
width: 327px;
height: 32px;
margin: 16px 0 0 24px;
}
.group_20 {
background-color: rgba(240, 242, 245, 1);
border-radius: 8px;
height: 32px;
width: 32px;
}
.block_6 {
height: 16px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
100% no-repeat;
background-size: 100% 100%;
width: 16px;
margin: 8px 0 0 8px;
}
.section_3 {
width: 16px;
height: 16px;
}
.text_9 {
width: 287px;
height: 24px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 14px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin-top: 4px;
}
.group_21 {
width: 327px;
height: 32px;
margin: 16px 0 0 24px;
}
.box_11 {
background-color: rgba(240, 242, 245, 1);
border-radius: 8px;
height: 32px;
width: 32px;
}
.box_12 {
height: 16px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
100% no-repeat;
background-size: 100% 100%;
width: 16px;
margin: 8px 0 0 8px;
}
.block_7 {
width: 16px;
height: 16px;
}
.text_10 {
width: 287px;
height: 24px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 14px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin-top: 4px;
}
.group_22 {
width: 139px;
height: 32px;
margin: 16px 0 0 24px;
}
.box_13 {
background-color: rgba(240, 242, 245, 1);
border-radius: 8px;
height: 32px;
width: 32px;
}
.box_14 {
height: 16px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
100% no-repeat;
background-size: 100% 100%;
width: 16px;
margin: 8px 0 0 8px;
}
.group_23 {
width: 16px;
height: 16px;
}
.text_11 {
width: 99px;
height: 24px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 14px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin-top: 4px;
}
.group_24 {
width: 247px;
height: 58px;
margin: 16px 0 0 24px;
}
.group_25 {
background-color: rgba(240, 242, 245, 1);
border-radius: 8px;
height: 32px;
width: 32px;
}
.group_26 {
height: 16px;
background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
100% no-repeat;
background-size: 100% 100%;
width: 16px;
margin: 8px 0 0 8px;
}
.section_4 {
width: 16px;
height: 16px;
}
.group_27 {
position: relative;
width: 207px;
height: 54px;
margin-top: 4px;
}
.image-wrapper_1 {
background-color: rgba(255, 255, 255, 0.1);
height: 38px;
width: 166px;
margin: 16px 0 0 41px;
}
.image_2 {
width: 134px;
height: 34px;
margin: 4px 0 0 16px;
}
.text_12 {
position: absolute;
left: 0;
top: 0;
width: 139px;
height: 24px;
overflow-wrap: break-word;
color: rgba(25, 33, 61, 1);
font-size: 14px;
font-family: PingFang SC-Regular;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
}
/* Add your CSS styles here */
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或