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

Channel静态页面构建

bogu_yjt
ting 7 months ago
parent
afa25cb532
commit
b1c654d808
2 changed files with 222 additions and 33 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. 36
      vueHomilyLink/src/assets/main.css
  2. 219
      vueHomilyLink/src/views/ChannelView.vue

36
vueHomilyLink/src/assets/main.css
View File

@ -1,35 +1,9 @@
@import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
html,body{
margin:0px;
height: 100%;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
#app{
height: 100%;
}

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

@ -1,10 +1,225 @@
<script setup>
import Nav from '@/components/Nav.vue';
</script>
<template>
频道
<Nav></Nav>
<div class="channel">
<div class="channel-head">
<!-- 1-订阅按钮 -->
<button disabled="disabled" type="button" class="submit">已订阅</button>
<!-- 2-背景图片 -->
<img alt="" class="bc-image" src="https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg" />
<!-- 3-频道主题 -->
<div class="channel-title">
<!-- 频道头像 -->
<img alt="" class="title-image" src="https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png" />
<!-- 频道title -->
<div class="title-content">
<h3>量价时空四维预测术</h3>
<span>5525已订阅</span>
<p style="line-height: 18px;">.</p>
</div>
</div>
</div>
<!-- 频道内容 -->
<div class="channel-content">
<!-- 导航栏 -->
<div class="content-nav">
<button class="tab">全部</button>
<button class="tab">文章</button>
<button class="tab">视频</button>
<button class="tab">合集</button>
</div>
<!-- 内容 -->
<div class="content-list">
<ul class="list-display">
<!-- 一条 -->
<li>
<div class="sub-topic">
<!-- 左边 -->
<div class="sub-left">
<img class="sub-image" src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg" alt="视频缩略图">
</div>
<!-- 右边 -->
<div class="sub-right">
<!-- title -->
<h3 class="right-title">大国博弈下的深度交易策略</h3>
<div class="right-inline">
<!-- HomilyLink -->
<div class="right-item">
<img src="https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg" class="img1">
<div>HomilyLink</div>
</div>
<!-- 评论 -->
<span class="right-item">0评论</span>
<!-- 日期 -->
<div class="right-item"> 05-26 11:42 </div>
</div>
</div>
</div>
</li>
<li>
<div class="sub-topic">
<!-- 左边 -->
<div class="sub-left">
<img class="sub-image" src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg" alt="视频缩略图">
</div>
<!-- 右边 -->
<div class="sub-right">
<!-- title -->
<h3 class="right-title">大国博弈下的深度交易策略</h3>
<div class="right-inline">
<!-- HomilyLink -->
<div class="right-item">
<img src="https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg" class="img1">
<div>HomilyLink</div>
</div>
<!-- 评论 -->
<span class="right-item">0评论</span>
<!-- 日期 -->
<div class="right-item"> 05-26 11:42 </div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<style scoped>
.channel{
width: 800px;
margin-left: auto;
margin-right: auto;
}
.channel-head{
position: relative;
height: 200px;
width: 100%;
}
.bc-image{
height: 100%;
width: 100%;
}
.submit{
position: absolute; /* 绝对定位 */
top: 50px; /* 根据需要调整位置 */
right: 10px; /* 根据需要调整位置 */
color: rgb(129, 132, 134);
background-color: aliceblue;
padding: 10px;
border-radius: 5%;
}
.channel-title{
box-sizing: border-box;
position: absolute;
left: 60px;
top: 50px;
background: rgba(0, 0, 0, .4);
width: 400px;
overflow: hidden;
}
.title-image{
width: 90px;
height: 90px;
margin-right: 25px;
vertical-align: top;
border-radius: 50%;
}
.title-content{
display: inline-block;
position: absolute;
width: 400px;
color: white;
overflow: hidden;
}
.channel-title h3{
max-width: 75%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 24px;
color: #fff;
margin: 0px;
z-index: 999;
}
.channel-title span{
padding: 4px 0;
font-size: 14px;
color: #fff;
}
.content-nav {
display: flex;
justify-content: flex-start; /* 修正了属性名中的空格 */
background-color: #fff; /* 修正了属性名中的空格 */
border-bottom: 1px solid #ccc; /* 修正了属性名中的空格 */
margin: 10px;
}
.tab {
padding: 10px 20px;
border: none;
background-color: transparent; /* 修正了属性名中的空格 */
cursor: pointer;
font-size: 16px;
}
.active {
color: red;
border-bottom: 2px solid red; /* 修正了属性名中的空格 */
}
.list-display{
list-style-type: none;
padding: 0px;
}
.sub-topic {
margin: 10px 0;
padding: 10px;
display: flex;
}
.sub-left{
height: 112px;
width: 200px;
}
.sub-image{
width: 100%;
height: 100%;
}
.right-inline{
display: flex;
margin-bottom: 15px;
align-items: center;
font-size: 16px;
}
.right-title{
margin-left: 10px;
}
.right-item{
display: flex;
color: #8e8e8e;
font-size: 14px;
margin-right: 18px;
align-items: center;
}
.img1{
margin-left: 10px;
width: 22px;
height: 22px;
border-radius: 50%;
}
</style>
Write Preview
Loading…
Cancel
Save