first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1 @@
380570b7-f8b7-4086-812b-19b6c851995e

View File

@@ -0,0 +1,113 @@
<template lang="pug">
.Comment
ItemHeader
.list
div(v-if="commentList.length != 0")
.item(v-for="(item,index) in commentList" :key="index")
img.auth(:src="item.logo")
.right_info
.info_top
.top_left
p {{item.auth}}
span {{item.time}}
.top_right
img.zan(src="/img/icon/give_thumbs-up.png")
span {{ item.zan }}
.info_text {{item.content}}
.nodata(v-else)
img(src="/img/hm_bg_img_no.png")
p 快来发表你的评论吧
</template>
<script>
import ItemHeader from "./ItemHeader";
export default {
name: "Comment",
props: {
commentList: {
type: Array,
default: []
}
},
provide: {
title: '全部评论',
},
components: {
ItemHeader
}
}
</script>
<style scoped lang="less">
.Comment {
padding: 0.48rem 0.32rem;
box-sizing: border-box;
.list {
.item {
display: flex;
justify-content: space-between;
margin-bottom: 0.933rem;
.auth {
width: 0.933rem;
height: 0.933rem;
margin-right: 0.267rem;
}
.right_info {
width: 89%;
.info_top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.307rem;
.top_left {
p {
font-size: 0.373rem;
line-height: 0.56rem;
color: #333333;
}
span {
font-size: 0.267rem;
color: #999999;
}
}
.top_right {
display: flex;
align-items: center;
img {
width: 0.347rem;
height: 0.36rem;
margin-right: 0.133rem;
vertical-align: bottom;
}
span {
font-size: 0.32rem;
color: #999999;
}
}
}
.info_text {
font-size: 0.373rem;
color: #333333;
}
}
}
.nodata {
width: 5.56rem;
margin: 0 auto;
margin-top: 0.6rem;
text-align: center;
img {
width: 5.56rem;
height: 4.653rem;
}
p {
margin-top: 0.68rem;
font-size: 0.373rem;
color: #999999;
}
}
}
}
</style>

View File

@@ -0,0 +1,70 @@
<template lang="pug">
.hello
h1 {{ msg }}
p
| For a guide and recipes on how to configure / customize this project,
br
| check out the
a(href='https://cli.vuejs.org', target='_blank', rel='noopener') vue-cli documentation
| .
h3 Installed CLI Plugins
ul
li
a(href='https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel', target='_blank', rel='noopener') babel
li
a(href='https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router', target='_blank', rel='noopener') router
li
a(href='https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex', target='_blank', rel='noopener') vuex
h3 Essential Links
ul
li
a(href='https://vuejs.org', target='_blank', rel='noopener') Core Docs
li
a(href='https://forum.vuejs.org', target='_blank', rel='noopener') Forum
li
a(href='https://chat.vuejs.org', target='_blank', rel='noopener') Community Chat
li
a(href='https://twitter.com/vuejs', target='_blank', rel='noopener') Twitter
li
a(href='https://news.vuejs.org', target='_blank', rel='noopener') News
h3 Ecosystem
ul
li
a(href='https://router.vuejs.org', target='_blank', rel='noopener') vue-router
li
a(href='https://vuex.vuejs.org', target='_blank', rel='noopener') vuex
li
a(href='https://github.com/vuejs/vue-devtools#vue-devtools', target='_blank', rel='noopener') vue-devtools
li
a(href='https://vue-loader.vuejs.org', target='_blank', rel='noopener') vue-loader
li
a(href='https://github.com/vuejs/awesome-vue', target='_blank', rel='noopener') awesome-vue
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View File

@@ -0,0 +1,28 @@
<template lang="pug">
.itemHeader
.title {{title}}
</template>
<script>
export default {
name: "ItemHeader",
inject: ['title']
// props: {
// title: {
// type: String,
// default: ''
// }
// }
}
</script>
<style scoped lang="less">
.itemHeader {
.title {
height: 1.347rem;
line-height: 1.347rem;
font-size: 0.427rem;
color: #333333;
}
}
</style>

View File

@@ -0,0 +1,49 @@
<template lang="pug">
.swiper
van-swipe(@change='onChange')
van-swipe-item(v-for="(v,i) in swiper" :key="i")
img(:src="v")
template(#indicator='')
.custom {{ current + 1 }} / {{ swiper.length }}
</template>
<script>
export default {
name: "Swiper",
props: {
swiper: {
type: Array,
default: []
}
},
data () {
return {
current: 0,
}
},
methods: {
onChange(index) {
this.current = index;
},
}
}
</script>
<style scoped lang="less">
.swiper {
img {
width: 100%;
}
}
.custom {
position: absolute;
right: 0.533rem;
bottom: 0.627rem;
padding: 0.147rem 0.373rem;
font-size: 0.373rem;
background-color: rgb(0 0 0 / 0.6);
border-radius: 0.32rem;
color: #fff;
}
</style>

View File

@@ -0,0 +1,58 @@
<template lang="pug">
.tvList
.listItem(v-for="(item,index) in listData" :key="index" @click="itemClick(index)")
span(:class="index==active ? 'red' : '' ") {{ item.title }}
img(src="/img/act-list.gif" v-if="index==active")
</template>
<script>
export default {
name: "TvList",
props: {
listData: {
type: Array,
default: []
},
isActive: {
default: null
}
},
data() {
return {
active: this.isActive
}
},
async created() {
},
methods: {
itemClick(i) {
this.active = i;
this.$emit("change",i)
},
},
}
</script>
<style scoped lang="less">
.listItem {
display: flex;
justify-content: space-between;
padding: 0.507rem 0.813rem;
align-items: center;
border-top: 1px solid #e5e5e5;
.red {
color: red;
}
span {
font-size: 0.427rem;
}
img {
width: 0.36rem;
height: 0.4rem;
}
&:last-child {
border-bottom: 1px solid #e5e5e5;
}
}
</style>

View File

@@ -0,0 +1,62 @@
<template lang="pug">
.video
h2 视频播放
video-player.video-player-box(ref='videoPlayer'
:options='playerOptions',
:playsinline='true')
</template>
<script>
import 'videojs-contrib-hls';
export default {
name: "Live",
props: {
videoUrl: {
type: String
}
},
data() {
return {
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0],
autoplay: false,
muted: false,
loop: false,
preload: 'none',
language: 'zh-CN',
aspectRatio: '16:9',
fluid: false,
sources: [{
type: 'application/x-mpegURL',
src: this.videoUrl,
}],
poster: '',
notSupportedMessage: '此视频暂无法播放,请稍后再试',
controlBar: {
// 当前时间和总时间的 分隔符
timeDivider: true,
//当前播放时间
currentTimeDisplay: true,
// 总时间
durationDisplay: true,
/**
* 区分 currentTimeDisplay,timeDivider,durationDisplay
* remainingTimeDisplay显示默认样式只显示当前播放时间一般
* 为false
*/
remainingTimeDisplay: false,
fullscreenToggle: true
}
}
}
},
created() {
console.log(this.videoUrl)
console.log(this.playerOptions.sources[0])
}
}
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,130 @@
<template lang="pug">
.recommend
ItemHeader
//- 文章资讯页面的相关布局
.content_theme1(v-if=" theme == 'theme1'")
.item(v-for="(item,index) in list" :key="index" @click="enterInfo(item.id)")
//- router-link(:to={ path: "realTimeInfo", query: { id: item.id } })
.item_text
p {{ item.title}}
span {{ item.create_time}}
img.item_img(:src="item.icon")
// 视频页面的相关推荐布局
.content_theme2(v-else)
.item
.item_f(v-for="(item,index) in list" :key="index")
.f_time
img(:src="item.img")
.zz
span {{ item.videoTime}}
p(:class="index == 0 ? 'active': '' ") {{ item.title.substring(0,17)+'...'}}
</template>
<script>
import ItemHeader from "./ItemHeader";
export default {
props: {
theme: {
type: String,
default: 'theme1'
},
list: {
type: Array,
default: []
}
},
methods: {
enterInfo(id) {
this.$router.push({
path: '/realTimeInfo',
query: {
id: id
}
})
}
},
components: {
ItemHeader
}
}
</script>
<style scoped lang="less">
.recommend {
padding: 0.48rem 0.32rem;
box-sizing: border-box;
.content_theme1 {
.item {
display: flex;
justify-content: space-between;
margin-top: 0.2rem;
.item_text{
p {
font-size: 0.427rem;
line-height: 0.667rem;
color: #333333;
margin-bottom: 0.23rem;
}
span {
font-size: 0.32rem;
line-height: 0.747rem;
color: #999999;
}
}
.item_img{
width: 3.013rem;
height: 2.267rem;
border-radius: 0.053rem;
}
}
}
.content_theme2 {
.item {
display: flex;
overflow-x: auto;
.item_f {
.f_time {
width: 3.653rem;
height: 2.08rem;
border-radius: 0.053rem;
position: relative;
img {
width: 100%;
height: 100%;
}
.zz {
position: absolute;
width: 94%;
height: 93%;
z-index: 2;
background: #0000005c;
left: 4px;
top: 3px;
}
span {
position: absolute;
right: 0.187rem;
bottom: 0.173rem;
font-size: 0.293rem;
color: #ffffff;
z-index: 3;
}
}
p {
width: 3.653rem;
font-size: 0.373rem;
line-height: 0.627rem;
color: #333333;
}
.active {
color: #d0302c !important;
}
}
}
}
}
</style>