wanglin
/
practice_VUE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

显示优化

dev
lenghui 7 months ago
parent
c015fac84d
commit
d5deaa62db
5 changed files with 276 additions and 207 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      vueHomilyLink/src/views/ChannelView.vue
  2. 468
      vueHomilyLink/src/views/HomeView.vue
  3. 3
      vueHomilyLink/src/views/club/BoguView.vue
  4. 3
      vueHomilyLink/src/views/club/MuminView.vue
  5. 3
      vueHomilyLink/src/views/club/shenQiang.vue

6
vueHomilyLink/src/views/ChannelView.vue
View File

@ -288,24 +288,28 @@ function unsubmit(channelId){
color: rgb(19, 18, 18);
display: block;
transition: 0.3s;
width: 250px;
}
.nav-item:hover {
background-color: #407fdf;
color: #f1f1f1;
width: 250px;
}
.nav-item.button-active {
background-color: #407fdf;
color: white;
border-radius: 5%;
width: 250px;
}
.channel {
width: 46%;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.channel-head {

468
vueHomilyLink/src/views/HomeView.vue
View File

@ -1,11 +1,12 @@
<script setup>
import Nav from '@/components/Nav.vue';
import { ref, onMounted, reactive,computed } from 'vue';
import { ref, onMounted, reactive, computed } from 'vue';
import homeApi from '@/api/HomeApi';
const seeSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIjSURBVFiF7VhtkqQgDE2sudfSxwAOox4GOUYzFzPzY2Ar0higdWtnqni//IjwQh5JBGBgYGBg4H8C7xrIe68AAPZ9V4j4h4g+07tpmoLWOtwxzyXC3ntFRDMAqBZ7IlqttcuVOd8i3Es0xxXi3YSdcwsiztnjAACAiCsAQAq/917t+67iu/ybt4h3Ed627QnHVQ2IuLbqs+RsL+lmwjnZK2EtEA/GmEfLt1XCJb0i4uPqro/jPtmjpmhVCW/bRj2D8vRWi8A7iyESzkInhk3KHDX5ZHIT5zklnOvMGNNsW0IPacl2aiGAiKcelzYQIj6IaCWilY0xJ7mUkFJizbZImBMgIlGzua0x5qG1DtbaxVq7cNJRMkVorUNm+yyRfiHsnFs4ASmMfMAz2/gsxFslrXJmW3TwQNh7r/gmq+3yVMVq4OGuIW64EG9fHCxKohXTNIXSdQ7uWKOTpzYHwlGraWLF5VGDpM/DhIJjAEdJAsBLW1pMVbxYNKQj0fZKeizZfpQ+jGnpGa9n7/1pA57bOucA4Hsl80LCs0AOVnhE26KGCymmOR0h4oyIc3TiQFaKFO8rJFuxNPeUTKHaVfuPW0ozG6yr+QH4Jp82V61RymUjabyJMMBrL/yj28uEX9PAVybqIn7SgjaTBbjvJ/RvGuJnEKmssiyj8m/+6U8oR0sPLKDr55Xj8slPJ/G3iSbcelTFG5t0XNWS3gYGBgYGfg++AMoF42iHsimVAAAAAElFTkSuQmCC');
const pingSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg==');
const zanSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHOSURBVFiF7ZjdbawwEIXPISkknVzvC9p2sAtgKQC7hrTBS0wn9zbiyQsg4/3JgnfjKLpHWgmN/74dezwDwH/dFnMGO+eUiLQAlIh0AGCMOeXMWeUMDiEoAAoASLYk277vs4Be9g7s+/5EsgUAEelIAsAbSVXXNYdh8HvmzfLQJG+MOWmtD/O2kWydc+rbgGLvkOxme+752Q0Uq2kan5g8AEyHfbM2A6VnZ8+iDwWK9YgtSrUJyDmnnumdzUDTvQPgOd4BgNctnTd6R1lrP641isgInP+xu4HiG3iDd9S1BpJqmnc1391A93qHZBdCGL/o8wdRynHO+fn6WCXXS3nIGHOKQ11rnZWQY1lrZXr0WusDEHkoytwrOed8COFRDCtNOXC1ZhU17rpZczRt3UpnYT9RH74HaVlzOXOPyPY5UqmhGFBcnlRV5ZfnEjC3VAwoTkNxCVMMKIowH9uLb1kcYUBZIHXJWNxDqYoAXQt54Ad4KH1JKAIUh3yqIkBzyF+qrc4KNJJtmvmrqvKzzVr7kYbqDhh1rX0BEpFxLiu/kLqz302JSHepFF4+NgzD4I/H4ygi/wCM84/k36ZpfF3XnD8oZLJ4EXl/1lvL79cnbWbUVZZeqYsAAAAASUVORK5CYII=');
const play = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAFBSURBVFiFzdhNSsUwFIbhE5d0RVEUF+EedA0qij/ouiqKojhwCw7v/MJ1JK8DG6jtbZu0OTn5oJM0gydfaKAR6QlQ1Q/ADbDdNzd7GrBm1sCFtU3qtobyaNrmCK6ZcyvgMgKZv80InE2bA4jvgDYXlsCfItoMRIxFr81EQJ/0bSYGwt+hn65NBaBPmjYVgZCiTWWgz1npQJjaZkagz2CbbhMwelXz8yUix865z/aLUoAiIuKc63i2LCB9Aar2WFHATSlqi0W621xag7ftgaIaLPkjWYnISdBMg4P6IWopGWEfwFF015lw99GwTMB34HAyThl4NwumCHwDDpLgFICdg7cU4Cuwnxw3Agz9cb9WgQUAx/IC7KniZgCv1GETgc/AbjZcDawCcZdZYRHAJ2DHBNdA9sX+Et2H/5fpFXBq4fgF4t3cL8okR7EAAAAASUVORK5CYII=');
const clubMark1Src = ref('https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/uploads/default/416cf8f2e000451043b1d1af74b5dbb8.png ');
const clubMark2Src = ref('https://d31zlh4on95l9h.cloudfront.net/web/20241130133116/img/clubS1.b631a2c3.png');
@ -24,7 +25,7 @@ const articleData = reactive({
playTime: '',
club_id: '',
publishTime: '',
flag_type:''
flag_type: ''
});
// 定义一个函数，用于将接口返回的数据映射到articleData响应式对象中
@ -60,7 +61,7 @@ async function selectAll() {
try {
const response = await homeApi.gethomeList();
mapResponseToArticleData(response.data);
} catch (error) {
console.error('获取数据出错：', error);
}
@ -72,7 +73,7 @@ selectAll();
// 精选视频接口
const articleData2 = ref([]);
function fetchData (){
function fetchData() {
homeApi.getHomeVideo().then(response => {
// 将articleData响应式对象赋值给articleData2
articleData2.value = response.data;
@ -83,7 +84,7 @@ function fetchData (){
const hours = ('0' + date.getHours()).slice(-2);
const minutes = ('0' + date.getMinutes()).slice(-2);
return {
...item,
...item,
releaseTime: `${month}-${day} ${hours}:${minutes}`
};
});
@ -92,7 +93,7 @@ function fetchData (){
console.error('获取数据出错：', error);
});
};
fetchData ();
fetchData();
@ -122,49 +123,56 @@ const getColorClass = (index) => {
<div class="container" style="width: 600px;">
<div class="title"><b>推荐</b></div>
<ul class="data-list">
<li class="data-list-li articleList" v-for="(title, index) in articleData.title" :key="index">
<!-- 下面继续展示对应数据的渲染，和之前类似 -->
<div class="articleimg">
<div class="el-image articleimg-img">
<img :src="articleData.articleImgSrc[index]" alt="文章图片">
<span class="play-icon"></span>
</div>
<div class="club">
<span class="club_img">
<img v-if="articleData.club_id[index] === 1" :src="clubMark1Src" alt="club_id为1的角标">
<img v-else-if="articleData.club_id[index] === 2" :src="clubMark2Src" alt="club_id为2的角标">
<img v-else-if="articleData.club_id[index] === 3" :src="clubMark3Src" alt="club_id为3的角标">
<img v-else-if="articleData.club_id[index] === 4" :src="clubMark4Src" alt="club_id为4的角标">
</span>
</div>
</div>
<div class="articleinfo">
<p><b>{{ title }}</b></p>
<span class="articleinfo-avatar islink" style="font-size: 14px;">
<img :src="articleData.authorAvatarSrc[index]" alt="作者头像">
{{ articleData.authorName[index] }}
</span>
<span class="articleinfo-time" alt="发布时间">
{{ articleData.publishTime[index] }}
</span>
<span class="homepage-list-li-see">
<img :src="seeSrc" alt="浏览量图标">
{{ articleData.viewsCount[index] }}
</span>
<span class="homepage-list-li-ping">
<img :src="pingSrc" alt="评论数图标">
{{ articleData.commentsCount[index] }}
</span>
<span class="homepage-list-1i-zan">
<img :src="zanSrc" alt="点赞图标">
{{ articleData.likesCount[index] }}
</span>
</div>
</li>
</ul>
<li class="data-list-li articleList" v-for="(title, index) in articleData.title" :key="index">
<!-- 下面继续展示对应数据的渲染，和之前类似 -->
<div class="articleimg">
<div class="el-image articleimg-img">
<img :src="articleData.articleImgSrc[index]" alt="文章图片">
<div class="play-icon-container">
<span class="play-icon" v-if="articleData.flag_type[index]===1"></span>
<span class="play-icon-background" v-if="articleData.flag_type[index]===1"></span>
</div>
</div>
<div class="club">
<span class="club_img">
<img v-if="articleData.club_id[index] === 1" :src="clubMark1Src" alt="club_id为1的角标">
<img v-else-if="articleData.club_id[index] === 2" :src="clubMark2Src" alt="club_id为2的角标">
<img v-else-if="articleData.club_id[index] === 3" :src="clubMark3Src" alt="club_id为3的角标">
<img v-else-if="articleData.club_id[index] === 4" :src="clubMark4Src" alt="club_id为4的角标">
</span>
</div>
</div>
<div class="articleinfo">
<p><b>{{ title }}</b></p>
<div class="right-inline">
<!-- HomilyLink -->
<div class="right-item">
<img :src="articleData.authorAvatarSrc[index]" class="img1">
<div>{{ articleData.authorName[index] }}</div>
</div>
<!-- 日期 -->
<div class="right-item">{{ articleData.publishTime[index] }}</div>
<!-- 观看 -->
<div class="right-item">
<img :src="seeSrc" class="img2">
<div>{{ articleData.viewsCount[index] }}</div>
</div>
<!-- 评论 -->
<div class="right-item">
<img :src="pingSrc" class="img2">
<div>{{ articleData.commentsCount[index] }}</div>
</div>
<!-- 点赞 -->
<div class="right-item">
<img :src="zanSrc" class="img2">
<div>{{ articleData.likesCount[index] }}</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- 精选视频 -->
<div class="sidebar-right" style="width: 400px; float: right;">
<div>
@ -172,159 +180,209 @@ const getColorClass = (index) => {
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHJSURBVFiF1ZhRkoMgDIb/OD1CPc/SWe5Vey86i+dx75B9KHHEWsEItvu/tFYGviaQkBCUGqw1AECM6+RnEz49ADChB4DWuU67DinAOmJ8TWBy5ZnQb4XNBgxg1/TItJhwywVNAg7WGmL87KZaUA5os/YyWK0KHPDYv4O13eqYVy9KujSlNUsuAh4JJ3oF+QT4DjjREmQE+E44ERMurXNenqND8m64wBAdyhEwdZqO1JRlBNRYjwk3hLRWUlOWBtBZTzb0+e4uAbSohKkBgJBbt8rLlwBKJUGFSVxsSkxaGNQM1pqmxuFonetKWXM1F+9RCWsS49oo91+29oJWs+Bcwe2bTzz9flvWLDhPSVu0Zc3DLKjVCY94Zo5YLNzOt2Qsf6pGM5P2plQdcART7HQm9Ccm3IjLu3h05865i1uwFBjwCE1NCBV+72RAVAWaAtN5IFiQCf0eN4+1syqiLkvaJmNNogjYPvwxTRskqfPdETAJ1IpcKTHNFOR6YomqOm3aKy2xHjBLdUy4HI8Ta+7JCLB1zteoL3KVLNxFH936EH1080h0BGSqR5jTwKwGmXPp/f8t4Lk+tom+JKmpJ5WhERgZI2FLW7/8AexhA1wjeFcZAAAAAElFTkSuQmCC"
alt style="width: 20px; height: 20px; margin-right: 5px; vertical-align: middle;">精选视频
</div>
<ul class="data-list" >
<ul class="data-list">
<li class="data-list-li articleList" v-for="(article, index) in articleData2" :key="index">
<div class="articleimg">
<div class="el-image articleimg-img" >
<img :src="article.cover" alt="文章图片">
<span :class="['corner-mark', getColorClass(index)]">{{ index + 1 }}</span>
<span class="play-time">{{ article.videoDuration }}</span>
</div>
</div>
<div class="articleinfo">
<span class="articletitle">{{ article.name }}</span>
<span class="see">
<img :src="seeSrc" alt="浏览量图标">
{{ article.viewCount }}
</span>
<span class="articleinfo-time">{{ article.releaseTime }}</span>
</div>
</li>
</ul>
<div class="articleimg">
<div class="el-image articleimg-img">
<img :src="article.cover" alt="文章图片">
<span :class="['corner-mark', getColorClass(index)]">{{ index + 1 }}</span>
<span class="play-time">{{ article.videoDuration }}</span>
</div>
</div>
<div class="articleinfo">
<span class="articletitle">{{ article.name }}</span>
<div class="right-inline">
<!-- 观看 -->
<div class="right-item">
<img :src="seeSrc" class="img2">
<div>{{ article.viewCount }}</div>
</div>
<!-- 日期 -->
<div class="right-item">{{ article.releaseTime }}</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<style scoped>
.articletitle{
.img1 {
width: 22px;
height: 22px;
}
.img2 {
width: 18px;
height: 18px;
}
.right-inline {
display: flex;
margin-bottom: 5px;
align-items: center;
font-size: 16px;
}
.right-item {
display: flex;
color: #8e8e8e;
font-size: 14px;
margin-right: 18px;
align-items: center;
}
.articletitle {
display: block;
font-size: 16px;
margin-bottom: 20px;
margin-bottom: 30px;
}
.play-icon {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 16px; /* 根据需要调整三角形大小 */
border-color: transparent transparent transparent rgba(255, 255, 255, 0.8); /* 白色半透明三角形，可调整颜色 */
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 16px;
/* 根据需要调整三角形大小 */
border-color: transparent transparent transparent rgba(255, 255, 255, 1);
/* 白色半透明三角形，可调整颜色 */
position: absolute;
bottom: 180%;
left: 150%;
transform: translate(150%, -50%);
z-index: 1;
}
.play-icon-container {
width: 30px;
/* 可以根据需求调整这个容器宽度，用于控制整体大小和布局 */
height: 30px;
/* 可以根据需求调整这个容器高度，用于控制整体大小和布局 */
position: relative;
}
.daohang{
height: 32px;
.play-icon-background {
content: "";
width: 35px;
/* 调整圆形的直径大小 */
height: 35px;
/* 调整圆形的直径大小 */
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
bottom: 190%;
left: 75%;
transform: translateX(100%);
z-index: 0;
}
.container{
margin-right: 0;
margin-left: auto;
.daohang {
height: 32px;
}
.sidebar-right{
margin-right: auto;
margin-left: 0;
.container {
margin-right: 0;
margin-left: auto;
}
.sidebar-right {
margin-right: auto;
margin-left: 0;
}
body {
font-family: Arial, sans-serif;
}
.title {
font-size: 24px;
color: #333;
padding: 10px 0;
}
.data-list-li {
display: flex;
align-items: flex-start;
padding: 10px 0;
}
.articleimg {
position: relative; /* 设置相对定位 */
width: 150px;
height: 100px;
margin-right: 10px; /* 减少右边距以让文字更靠近图片 */
border-radius: 5px;
/* overflow: hidden; */
}
.articleimg-img img {
width: 150px;
height: 90px;
object-fit: cover;
}
.articleinfo {
flex-grow: 1;
font-size: 20px;
margin: 0;
padding: 0;
}
.articleinfo p {
margin: 0; /* 移除外边距 */
font-size: 20px;
color: #555;
margin-bottom: 7%;
}
.right_inline {
display: inline-block;
vertical-align: top;
}
.articleinfo-avatar {
margin-left: 0;
display: inline-block;
}
.articleinfo-avatar img {
width: 20px;
height: 20px;
border-radius: 50%;
}
.articleinfo-time {
font-size: 13px;
color: #000000;
margin-left: 10px;
}
.homepage-list-li-see,
.homepage-list-li-ping,
.homepage-list-1i-zan {
display: inline-block;
margin-left: 10px;
cursor: pointer;
font-size: 13px;
}
.homepage-list-li-see img,
.homepage-list-li-ping img,
.homepage-list-1i-zan img {
width: 20px;
height: 20px;
padding: 0;
margin-left: 0;
}
.see{
margin-left: 0;
font-size: 13px;
}
.see img{
width: 20px;
height: 20px;
}
.class123{
/*让页面分为左右结构*/
display: flex;
margin-top: 30px
}
.corner-mark {
position: absolute;
top: 0;
left: 0;
background-color: rgb(128, 128, 128);
color: white;
padding: 2px 5px;
border-radius: 2px;
font-size: 12px;
font-family: Arial, sans-serif;
}
.title {
font-size: 24px;
color: #333;
padding: 10px 0;
}
.data-list-li {
display: flex;
align-items: flex-start;
padding: 10px 0;
}
.articleimg {
position: relative;
/* 设置相对定位 */
width: 150px;
height: 100px;
margin-right: 10px;
/* 减少右边距以让文字更靠近图片 */
border-radius: 5px;
/* overflow: hidden; */
}
.articleimg-img img {
width: 150px;
height: 90px;
object-fit: cover;
}
.articleinfo {
flex-grow: 1;
font-size: 20px;
margin: 0;
padding: 0;
}
.articleinfo p {
margin: 0;
/* 移除外边距 */
font-size: 20px;
color: #555;
margin-bottom: 10%;
}
.right_inline {
display: inline-block;
vertical-align: top;
}
.articleinfo-avatar {
margin-left: 0;
display: inline-block;
}
.articleinfo-avatar img {
width: 20px;
height: 20px;
border-radius: 50%;
}
.articleinfo-time {
font-size: 13px;
color: #000000;
margin-left: 10px;
}
.class123 {
/*让页面分为左右结构*/
display: flex;
margin-top: 30px
}
.corner-mark {
position: absolute;
top: 0;
left: 0;
background-color: rgb(128, 128, 128);
color: white;
padding: 2px 5px;
border-radius: 2px;
font-size: 12px;
}
.color-red {
background-color: red;
background-color: red;
}
.color-green {
@ -336,31 +394,35 @@ body {
}
.play-time {
position: absolute;
bottom: 4%;
right: 0;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，可调整透明度和颜色 */
color: white;
padding: 2px 5px;
border-radius: 2px;
font-size: 12px;
position: absolute;
bottom: 4%;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
/* 半透明黑色背景，可调整透明度和颜色 */
color: white;
padding: 2px 5px;
border-radius: 2px;
font-size: 12px;
}
.club {
position: absolute;
top: 0;
right: 0;
/* 可以根据实际需求调整容器大小等样式 */
width: 10px;
height: 10px;
position: absolute;
top: 0;
right: 0;
/* 可以根据实际需求调整容器大小等样式 */
width: 10px;
height: 10px;
}
.club_img img {
position: absolute;
top: 0;
right: 0;
/* 可以根据实际需求调整图片的大小等其他样式，以下是示例 */
width: 15px; /* 假设调整宽度 */
height: 15px; /* 假设调整高度 */
}
position: absolute;
top: 0;
right: 0;
/* 可以根据实际需求调整图片的大小等其他样式，以下是示例 */
width: 15px;
/* 假设调整宽度 */
height: 15px;
/* 假设调整高度 */
}
</style>

3
vueHomilyLink/src/views/club/BoguView.vue
View File

@ -112,9 +112,10 @@ loadShows();
</template>
<style scoped>
.club{
width: 46%;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
header {
background: linear-gradient(to right, #ffe5ca,#ffca95,#ffa953);

3
vueHomilyLink/src/views/club/MuminView.vue
View File

@ -110,9 +110,10 @@ loadShows();
</template>
<style scoped>
.club{
width: 46%;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
header {
background: linear-gradient(to right, #f5f8fa,#dde7ee,#c7d9e5);

3
vueHomilyLink/src/views/club/shenQiang.vue
View File

@ -110,9 +110,10 @@ loadShows();
</template>
<style scoped>
.club{
width: 46%;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
header {
background: linear-gradient(to right, #dbeaf6,#8bc7f9,#30a0fc);

Write Preview
Loading…
Cancel
Save