bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
历届学生/font-end-nine/项目练习/上课项目/在包河/src/App.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<!--
<style lang="less">
@import "~@mixins/clear";
</style> -->

75
历届学生/font-end-nine/项目练习/上课项目/在包河/src/api/api.js Normal file
View File

@@ -0,0 +1,75 @@
import { Axios } from "axios";
import config from "@/config";
import { Toast } from 'vant';
class Api extends Axios {
constructor() {
super({
baseURL: config.checkBaseUrl(),
timeout: 10000,
headers: {
"Content-Type": "application/json; charset=utf-8;"
}
})
this.inter()
}
async getRequest(params) {
return await this.get(params.url, {
params: params.data,
headers: params.header
})
}
async postRequest(params) {
return await this.post(params.url, params.data, {
headers: params.header
})
}
inter() {
// 添加请求拦截器
this.interceptors.request.use(function (config) {
Toast.loading({
duration: 0,
message: '加载中..'
});
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
this.interceptors.response.use(function (response) {
Toast.clear();
response.data = JSON.parse(response.data)
switch (response.data.status) {
case 200:
return response.data.data
break;
case 404:
Toast.fail(response.data.message);
throw new Error(response.data.message);
break;
default:
break;
}
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
}
}
export default new Api()

4
历届学生/font-end-nine/项目练习/上课项目/在包河/src/assets/less/config/_.less Normal file
View File

@@ -0,0 +1,4 @@
@import "./color.less";
@import "./size.less";

73
历届学生/font-end-nine/项目练习/上课项目/在包河/src/assets/less/config/color.less Normal file
View File

@@ -0,0 +1,73 @@
@black: #000;
@white: #fff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ee0a24;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;
// Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
// Component Colors
@primary-color: var(--van-blue);
@success-color: var(--van-green);
@danger-color: var(--van-red);
@warning-color: var(--van-orange);
@text-color: var(--van-gray-8);
@text-color-2: var(--van-gray-6);
@text-color-3: var(--van-gray-5);
@text-link-color: #576b95;
@active-color: var(--van-gray-2);
@active-opacity: 0.6;
@disabled-opacity: 0.5;
@background-color: var(--van-gray-1);
@background-color-light: var(--van-white);
// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;
// Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
'Microsoft Yahei', sans-serif;
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
sans-serif;
// Animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;
// Border
@border-color: var(--van-gray-3);
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;

19
历届学生/font-end-nine/项目练习/上课项目/在包河/src/assets/less/config/size.less Normal file
View File

@@ -0,0 +1,19 @@
@f12: 12px;
@f13: 13px;
@f14: 14px;
@f15: 15px;
@f16: 16px;
@f17: 17px;
@f18: 18px;
@f19: 19px;
@f20: 20px;
@f21: 21px;
@f22: 22px;
@f23: 23px;
@f24: 24px;
@f25: 25px;
@f26: 26px;
@f27: 27px;
@f28: 28px;
@f29: 29px;
@f30: 30px;

111
历届学生/font-end-nine/项目练习/上课项目/在包河/src/assets/less/mixins/clear.less Normal file
View File

@@ -0,0 +1,111 @@
@import "../config/color.less";
:root {
// Color Palette
--van-black: @black;
--van-white: @white;
--van-gray-1: @gray-1;
--van-gray-2: @gray-2;
--van-gray-3: @gray-3;
--van-gray-4: @gray-4;
--van-gray-5: @gray-5;
--van-gray-6: @gray-6;
--van-gray-7: @gray-7;
--van-gray-8: @gray-8;
--van-red: @red;
--van-blue: @blue;
--van-orange: @orange;
--van-orange-dark: @orange-dark;
--van-orange-light: @orange-light;
--van-green: @green;
// Gradient Colors
--van-gradient-red: @gradient-red;
--van-gradient-orange: @gradient-orange;
// Component Colors
--van-primary-color: @primary-color;
--van-success-color: @success-color;
--van-danger-color: @danger-color;
--van-warning-color: @warning-color;
--van-text-color: @text-color;
--van-text-color-2: @text-color-2;
--van-text-color-3: @text-color-3;
--van-text-link-color: @text-link-color;
--van-active-color: @active-color;
--van-active-opacity: @active-opacity;
--van-disabled-opacity: @disabled-opacity;
--van-background-color: @background-color;
--van-background-color-light: @background-color-light;
// Padding
--van-padding-base: @padding-base;
--van-padding-xs: @padding-xs;
--van-padding-sm: @padding-sm;
--van-padding-md: @padding-md;
--van-padding-lg: @padding-lg;
--van-padding-xl: @padding-xl;
// Font
--van-font-size-xs: @font-size-xs;
--van-font-size-sm: @font-size-sm;
--van-font-size-md: @font-size-md;
--van-font-size-lg: @font-size-lg;
--van-font-weight-bold: @font-weight-bold;
--van-line-height-xs: @line-height-xs;
--van-line-height-sm: @line-height-sm;
--van-line-height-md: @line-height-md;
--van-line-height-lg: @line-height-lg;
--van-base-font-family: @base-font-family;
--van-price-integer-font-family: @price-integer-font-family;
// Animation
--van-animation-duration-base: @animation-duration-base;
--van-animation-duration-fast: @animation-duration-fast;
--van-animation-timing-function-enter: @animation-timing-function-enter;
--van-animation-timing-function-leave: @animation-timing-function-leave;
// Border
--van-border-color: @border-color;
--van-border-width-base: @border-width-base;
--van-border-radius-sm: @border-radius-sm;
--van-border-radius-md: @border-radius-md;
--van-border-radius-lg: @border-radius-lg;
--van-border-radius-max: @border-radius-max;
}
body,h1,h2,h3,h4,h5,h6,ul,li,p {
margin: 0;
padding: 0;
}
body {
/* font-size: 0; */
}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
flex: 1;
margin: 0 10px;
border-radius: 20px;
height: 32px;
}
a {
text-decoration: none;
color: #333;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
img {
// width: 100%;
}

68
历届学生/font-end-nine/项目练习/上课项目/在包河/src/assets/less/mixins/index.less Normal file
View File

@@ -0,0 +1,68 @@
@import "../config/_.less";
.clearfix() {
&:after,
&:before {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.ellipsis() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.no-scrollbar() {
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
opacity: 0 !important;
}
}
.hairline-common() {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
}
.hairline(@color: var(--van-border-color)) {
.hairline-common();
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 0 solid @color;
transform: scale(0.5);
}
.hairline-top(@color: var(--van-border-color), @left: 0, @right: 0) {
.hairline-common();
top: 0;
right: @right;
left: @left;
border-top: 1px solid @color;
transform: scaleY(0.5);
}
.hairline-bottom(@color: var(--van-border-color), @left: 0, @right: 0) {
.hairline-common();
right: @right;
bottom: 0;
left: @left;
border-bottom: 1px solid @color;
transform: scaleY(0.5);
}

0
历届学生/font-end-nine/项目练习/上课项目/在包河/src/assets/less/page/About.less Normal file
View File

9
历届学生/font-end-nine/项目练习/上课项目/在包河/src/assets/less/page/Home.less Normal file
View File

@@ -0,0 +1,9 @@
@import "../config/_.less";
@import "../mixins/index.less";
.home {
h2 {
color: @green;
font-size: @f20;
.ellipsis();
}
}

123
历届学生/font-end-nine/项目练习/上课项目/在包河/src/components/Live.vue Normal file
View File

@@ -0,0 +1,123 @@
<template>
<div class="Live">
<ul class="list">
<li v-for="(v, i) in list" :key="i">
<div class="top">
<img class="cover" :src="v.paly_img" alt="" />
<img
class="state"
v-if="v.paly_type == 1"
src="@sta/live_lab_ing.png"
alt=""
/>
<img
class="state"
v-if="v.paly_type == 2"
src="@sta/live_lab_notice_big.png"
alt=""
/>
<img
class="state"
v-if="v.paly_type == 3"
src="@sta/live_lab_playback_big.png"
alt=""
/>
<div class="time" v-show="v.paly_type==2">
<div>直播时间：{{moment(v.play_time).format("MM-DD HH:MM")}}</div>
</div>
<span v-if="v.paly_type == 1">{{ v.play_count }}人在看</span>
<span v-else-if="v.paly_type == 2">{{ v.play_count }}人预约</span>
<span v-else>{{ v.play_count }}人看过</span>
</div>
<div class="bottom">{{ v.paly_title }}</div>
</li>
</ul>
</div>
</template>
<script>
import moment from "moment";
export default {
name: "Live",
data() {
return {
list: [],
};
},
created() {
this.getLive();
},
methods: {
async getLive() {
this.list = await this.$http.index.live();
console.log(this.list);
},
moment,
},
};
</script>
<style scoped lang="less">
.Live {
display: flex;
width: 100%;
justify-content: center;
.list {
width: 9.36rem;
margin-top: 0.4rem;
li {
width: 100%;
margin-bottom: 0.533rem;
.top {
width: 9.36rem;
position: relative;
margin-bottom: 0.28rem;
.cover {
width: 9.36rem;
height: 5.2rem;
border-radius: 0.053rem;
}
.state {
height: 0.48rem;
position: absolute;
top: 0.187rem;
right: 0.187rem;
}
.time {
position: absolute;
width: 3.733rem;
height: 0.533rem;
background-color: #000000;
border-radius: 0.267rem;
opacity: 0.7;
top: 50%;
left: 50%;
transform: translate(-50%);
div {
line-height: 0.533rem;
text-align: center;
font-family: PingFangSC-Medium;
font-size: 0.293rem;
line-height: 0.512rem;
color: #ffffff;
}
}
span {
position: absolute;
font-family: PingFangSC-Medium;
font-size: 0.293rem;
line-height: 0.512rem;
color: #ffffff;
bottom: 0.16rem;
right: 0.173rem;
}
}
.bottom {
font-size: 0.4rem;
line-height: 0.6rem;
color: #333333;
}
}
}
}
</style>

87
历届学生/font-end-nine/项目练习/上课项目/在包河/src/components/News.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<div class="News">
<toubu></toubu>
<div class="zhengwen">
<div class="tittle">{{ list.tittle }}</div>
<div class="time">
<span>{{ item.creatTime }}</span>
<span> 阅读量{{ list.browse }} </span>
</div>
<div class="content">
{{ list.content }}
</div>
<div class="footer">
<img src="@sta/select-down.png" class="sel" alt="" />
<img src="@sta/open.png" class="open" alt="" />
</div>
</div>
<comment></comment>
<discuss></discuss>
</div>
</template>
<script>
import toubu from "@/components/toubu";
import comment from "@/components/comment";
import discuss from "@/components/discuss";
export default {
name: "news",
data() {
return {
list: {},
status: false, //flase未超过高度 true 超过高度
};
},
created() {
this.getNews();
},
mounted() {
console.log(this.list);
this.list.forEach((item) => {
var date = new Date(item.creatTime);
console.log("date", date);
item.creatTime = `${date.getFullYear()}-${
date.getMonth() + 1
}-${date.getDate()}`;
});
},
methods: {
async getNews() {
this.list = await this.$http.index.news();
},
},
};
components: {
toubu, comment, discuss;
}
</script>
<style scoped lang="less">
.content {
width: auto;
height: 15.08rem;
font-family: PingFang-SC-Medium;
font-size: 0.427rem;
line-height: 0.667rem;
color: #000000;
}
.footer {
position: fixed;
bottom: 0rem;
}
.sel {
width: 0.693rem;
height: 0rem;
position: fixed;
top: 17.133rem;
left: 4.667rem;
}
</style>

100
历届学生/font-end-nine/项目练习/上课项目/在包河/src/components/Radio.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<div class="Radio" v-if="Object.keys(list).length != 0">
<cvideo :show="false" v-if="videoSrc.length != 0" :url="videoSrc"></cvideo>
<div class="title">{{ list.play_title }}</div>
<img class="music" :src="list.play_img" alt="">
<img class="gif" :src="status ? require('@sta/sound_spectrum.gif') : require('@sta/sound_spectrum.png') " alt="">
<ul class="menu">
<li>
<img src="@sta/live_broadcast_icon.png" alt="">
<div>当前直播</div>
</li>
<li>
<img @click="PlayVideo" :src="status ? require('@sta/radio_stop.png') : require('@sta/radio_up.png') " alt="">
</li>
<li>
<img src="@sta/program_list_icon.png" alt="">
<div>节目列表</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Radio',
data () {
return {
videoSrc: [],
list: {},
status: false, // false 未播放状态， true 播放状态
}
},
created () {
this.getRadio();
},
methods: {
async getRadio() {
this.list = await this.$http.index.radio();
this.videoSrc = [
{
type: "application/x-mpegURL",
src: this.list.play_url
}
]
},
PlayVideo() {
this.status ? this.$children[0].PlayerPause() : this.$children[0].PlayerPlay()
this.status = !this.status
}
}
}
</script>
<style scoped lang="less">
.Radio {
text-align: center;
.title {
font-family: PingFangSC-Bold;
font-size: 0.48rem;
color: #000000;
margin-top: 1.347rem;
margin-bottom: 0.84rem;
}
.music {
width: 7.467rem;
height: 7.467rem;
margin-bottom: 0.667rem;
}
.gif {
width: 7.467rem;
height: 1.2rem;
margin-bottom: 0.733rem;
}
.menu {
display: flex;
align-items: center;
width: 7.467rem;
justify-content: space-between;
margin: 0 auto;
li {
img {
width: 0.52rem;
height: 0.52rem;
}
&:nth-child(2) {
img {
width: 1.6rem;
height: 1.6rem;
}
}
div {
font-family: PingFang-SC-Medium;
font-size: 0.267rem;
color: #999999;
}
}
}
}
</style>

69
历届学生/font-end-nine/项目练习/上课项目/在包河/src/components/Swipe.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<van-swipe @change="onChange">
<div class="swipe">
<van-swipe-item">
{{ list.lunbo }}
</van-swipe-item>
</div>
<template #indicator>
<div class="custom-indicator">{{ current + 1 }}/{{ list.lunbo.length }}</div>
</template>
</van-swipe>
</template>
<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
name: "Swipe",
data() {
return {
current: 0,
list: []
};
},
created () {
this.getlunbo();
},
methods: {
onChange(index) {
this.current = index;
},
async getlunbo () {
this.list = await this.$http.index.post()},
},
}
</script>
<style>
.swipe {
width: 10rem;
height: 13.427rem;
}
.custom-indicator {
position: absolute;
right: 0.533rem;
bottom: 0.533rem;
padding: 0.373rem 0.147rem;
width: 1.333rem;
height: 0.64rem;
background: #5551517f;
border-radius: 0.32rem;
font-size: 0.373;
line-height: 0.667rem;
color: #ffffff;
}
</style>

33
历届学生/font-end-nine/项目练习/上课项目/在包河/src/components/TV.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="TV">
<TvList :arr="tvList"></TvList>
</div>
</template>
<script>
import TvList from './TvList'
export default {
name: 'TV',
data () {
return {
tvList: []
}
},
created() {
this.getTv()
},
methods: {
async getTv() {
this.tvList = await this.$http.index.tv();
console.log(this.tvList)
}
},
components: {
TvList
}
}
</script>
<style scoped lang="less">
</style>

64
历届学生/font-end-nine/项目练习/上课项目/在包河/src/components/TvList.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<ul class="TvList">
<li v-for="(item,index) in arr" @click="enterInfo(item.id)" :key="index">
<span :class=" item.id == $route.query.id && show ? 'active' : '' ">{{ item.title }}</span>
<img v-if="item.id == $route.query.id && show" src="@sta/act-list.gif" alt="">
</li>
</ul>
</template>
<script>
export default {
name: 'TvList',
data () {
return {}
},
props: {
show: {
type: Boolean,
default: false
},
arr: {
type: Array,
default: () => []
}
},
methods: {
enterInfo(id) {
this.$router.push({
name: 'TvInfo',
query: { id }
})
// this.$emit('click', id)
}
}
}
</script>
<style scoped lang="less">
.TvList {
li {
display: flex;
align-items: center;
justify-content: space-between;
height: 1.6rem;
background-color: #ffffff;
border-bottom: 0.013rem solid #e5e5e5;
padding-left: 0.547rem;
padding-right: 0.36rem;
span {
font-family: PingFangSC-Bold;
font-size: 0.427rem;
color: #333333;
}
.active {
color: #d0302c;
}
img {
width: 0.36rem;
height: 0.4rem;
}
}
}
</style>

64
历届学生/font-end-nine/项目练习/上课项目/在包河/src/components/Video.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="Video">
<video-player v-show="show" class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true">
</video-player>
</div>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'
export default {
name: 'Video',
props: {
url: {
type: Array,
default: () => []
},
show: {
type: Boolean,
default: true
}
},
data () {
return {
playerOptions: {
muted: false,
language: 'zh',
aspectRatio: '16:9',
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: this.url,
poster: "/static/images/author.jpg",
}
}
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
mounted () {
console.log(this.player)
},
methods: {
PlayerPlay() {
this.player.play()
},
PlayerPause() {
this.player.pause()
},
},
components: {
videoPlayer
}
}
</script>
<style scoped lang="less">
</style>

142
历届学生/font-end-nine/项目练习/上课项目/在包河/src/components/comment.vue Normal file
View File

@@ -0,0 +1,142 @@
<template>
<div class="comment">
<div class="title">全部评论</div>
<div v-if="arr.length == !0">
<ul class="list">
<li v-for="(v, i) in arr" :key="i">
<img class="header_img" :src="v.headUrl" alt="" />
<div class="right">
<div class="top">
<div class="left">
<div class="name">{{ v.name }}</div>
<div class="time">
{{ moment(v.creatTime).startOf("day").fromNow() }}
</div>
</div>
<div class="like">
<img src="@sta/give_thumbs-up.png" alt="" />
<span>{{ v.like }}</span>
</div>
</div>
<div class="content">
{{ v.content }}
</div>
</div>
</li>
</ul>
</div>
<div v-else>
<!-- <div class="noData">
<img src="@sta/hm_bg_img_no.png" alt="" />
<span>快来发表你的评论吧</span>
</div> -->
</div>
</div>
</template>
<script>
import moment from "moment";
moment.locale("zh-CN");
export default {
name: "comment",
data() {
return {};
},
props: {
arr: {
type: Array,
default: () => [],
},
},
created() {},
methods: {
moment,
},
};
</script>
<style scoped lang="less">
.comment {
.title {
height: 1.347rem;
font-family: PingFangSC-Bold;
font-size: 0.427rem;
line-height: 1.347rem;
color: #333333;
margin-left: 0.32rem;
}
.noData {
margin-top: 0.6rem;
display: flex;
flex-direction: column;
align-items: center;
img {
width: 5.56rem;
height: 4.653rem;
margin-bottom: 0.68rem;
}
span {
font-family: PingFang-SC-Medium;
font-size: 0.373rem;
line-height: 0.448rem;
color: #999999;
}
}
.list {
margin-left: 0.307rem;
margin-right: 0.32rem;
li {
display: flex;
margin-bottom: 0.933rem;
.header_img {
border-radius: 100%;
width: 0.933rem;
height: 0.947rem;
margin-right: 0.267rem;
}
.right {
flex: 1;
.top {
display: flex;
justify-content: space-between;
margin-bottom: 0.493rem;
.left {
.name {
font-family: PingFang-SC-Bold;
font-size: 0.373rem;
line-height: 0.56rem;
color: #333333;
}
.time {
font-family: PingFang-SC-Medium;
font-size: 0.267rem;
line-height: 0.56rem;
color: #999999;
}
}
.like {
img {
width: 0.347rem;
height: 0.36rem;
}
span {
font-family: PingFang-SC-Medium;
font-size: 0.32rem;
line-height: 0.56rem;
color: #999999;
}
}
}
.content {
font-family: PingFangSC-Medium;
font-size: 0.373rem;
line-height: 0.56rem;
letter-spacing: 0.008rem;
color: #333333;
}
}
}
}
}
</style>

31
历届学生/font-end-nine/项目练习/上课项目/在包河/src/components/discuss.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div class="discuss">
<h2>打开app查看全部评论</h2>
</div>
</template>
<script>
</script>
<style>
.discuss{
position: fixed;
width: 9.36rem;
height: 1.173rem;
border-radius: 0.107rem;
border: solid 0.027rem #d0302c;
margin: 0 0.333rem;
bottom: 0.533rem;
background-color: white;
}
h2{
font-size: 0.373rem;
line-height: 0.627rem;
letter-spacing: 0rem;
color: #d0302c;
text-align: center;
}
</style>

177
历届学生/font-end-nine/项目练习/上课项目/在包河/src/components/recommend.vue Normal file
View File

@@ -0,0 +1,177 @@
<template>
<div class="reconmmend_box">
<div class="title">{{ title }} </div>
<ul class="styleX" v-if=" number == 0">
<li v-for="(item ,index) in list" :key="index" @click="change(item,index)">
<div class="content_left">
<p>{{ item.content }}</p>
<div class="time">{{ item.creatTime }}</div>
</div>
<img :src="item.image" alt="">
</li>
</ul>
<ul class="styleY" v-else>
<li v-for="(item ,i) in list" :key="i" @click="change(item,i)">
<div class="content_top">
<img :src="item.image" alt="">
<span>{{ item.creatTime }}</span>
</div>
<p :class="i == index ? 'active' : ''">{{ item.content }}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'reconmmend',
data () {
return {
index: 0,
}
},
props:{
title:{
type:String,
defalut:()=>{
return ''
}
},
list:{
type:Array,
defalut:()=>{
return []
}
},
number:{
type:Number,
defalut:()=>{
return ''
}
}
},
mounted () {
console.log("23",this.list);
this.list.forEach((item) => {
//item.creatTime 为请求数据中的时间戳
var date = new Date(item.creatTime);
console.log('date',date);
item.creatTime = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
})
},
methods: {
change(item,index) {
this.index = index
this.$emit('click',{
type:this.number,
item,
})
}
}
}
</script>
<style lang="less" scoped>
.reconmmend_box{
padding: 0 0.32rem;
.title{
font-weight: 800;
font-size: 0.427rem;
color: #333333;
padding-bottom: 0.226rem;
}
.styleX{
li{
position: relative;
margin-top: 0.427rem;
display: flex;
&::after{
content: "";
width: 9.36rem;
height: 0.013rem;
position: absolute;
background: #e5e5e5;
bottom: -0.2rem;
}
.content_left{
flex: 1;
width: 6.027rem;
p{
font-size: 0.427rem;
color: #333333;
line-height: 0.6rem;
margin-top: 0.187rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
white-space:pre-wrap;
}
.time{
margin-top: 0.34rem;
font-size: 0.32rem;
color: #999999;
}
}
img{
width: 3.013rem;
height: 2.267rem;
border-radius: 0.053rem;
}
}
}
.styleY{
display: flex;
overflow-x: scroll;
border-bottom: 0.013rem solid #e5e5e5;
li{
margin-bottom: 0.52rem;
margin-top: 0.281rem;
margin-right: 0.147rem;
.content_top{
position: relative;
width: 3.653rem;
height: 2.08rem;
margin-bottom: 0.1rem;
img{
width: 100%;
height: 100%;
border-radius: 0.053rem;
}
span{
font-size: 0.293rem;
line-height: 0.512rem;
color: #ffffff;
position: absolute;
right: 0.24rem;
bottom: 0.1rem;
}
}
p{
width: 3.653rem;
//p标签强制换行
// white-space:pre-wrap;
font-size: 0.373rem;
line-height: 0.52rem;
color: #333333;
//超出两行省略隐藏...
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.active{
color: #d0302c;
}
}
} }
</style>

51
历届学生/font-end-nine/项目练习/上课项目/在包河/src/components/toubu.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div class="header">
<div class="left">
<img class="logo" src="@sta/gw_img_logo.png" alt="">
<img class="icon" src="@sta/logo_text_icon.png" alt="">
</div>
<div></div>
<img class="open" src="@sta/open.png" alt="">
</div>
</template>
<script>
export default {
}
</script>
<style scoped lang="less">
.header {
display: flex;
justify-content: space-between;
align-items: center;
background: #4c4c4c;
height:1.333rem;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 999;
.left {
.logo {
margin-left: 0.32rem;
width: 0.867rem;
height: 0.867rem;
}
.icon {
width: 1.76rem;
height: 0.613rem;
}
}
.open {
width: 1.92rem;
height: 0.693rem;
margin-right: 0.533rem;
}
}
</style>

146
历届学生/font-end-nine/项目练习/上课项目/在包河/src/components/ztcomment.vue Normal file
View File

@@ -0,0 +1,146 @@
<template>
<div class="comment_box">
<div class="title">{{ title }}</div>
<ul class="have" v-if=" list.length !== 0">
<li v-for="(item ,i) in list" :key="i">
<img class="user_img" :src="item.headUrl" alt="">
<div class="content_right">
<div class="content_top">
<div class="name">{{ item.name }}</div>
<div class="good" @click="good(item)">
<img src="@sta/give_thumbs-up.png" alt="">
<span>{{ item.like }}</span>
</div>
</div>
<div class="time">{{ item.creatTime }}</div>
<div class="text">{{ item.content }}</div>
</div>
</li>
</ul>
<div class="empty" v-else>
<img src="@sta/hm_bg_img_no.png" alt="">
<p>快来发表你的评论吧</p>
</div>
</div>
</template>
<script>
export default {
name:'ztcomment',
data(){
return {
}
},
props:{
title:{
type:String,
default:()=>{
return ''
}
},
list:{
type:Array,
default:()=>{
return []
}
}
},
created(){
},
methods:{
good(item){
console.log('点击');
item.isLike = !item.isLike
if(item.isLike){
item.goodNumber += 1
}else{
item.goodNumber -= 1
}
}
}
}
</script>
<style lang="less" scoped>
.comment_box{
padding: 0 0.32rem;
.title{
font-size: 0.427rem;
line-height: 0.448rem;
color: #333333;
font-weight: 800;
margin-bottom: 0.4rem;
}
.have{
li{
display: flex;
margin-bottom: 0.4rem;
margin-top: 0.4rem;
.user_img{
border-radius: 50%;
width: 0.933rem;
height: 0.933rem;
margin-right: 0.267rem;
}
.content_right{
flex: 1;
.content_top{
display: flex;
justify-content: space-between;
align-items: center;
.name{
font-size: 0.373rem;
line-height: 0.56rem;
color: #333333;
}
.good{
display: flex;
align-items: baseline;
justify-content: center;
img{
margin-right: 0.133rem;
width: 0.347rem;
height: 0.36rem;
}
span{
font-size: 0.38rem;
line-height: 0.56rem;
color: #999999;
}
}
}
}
.time{
font-size: 0.267rem;
color: #999999;
}
.text{
font-size: 0.373rem;
line-height: 0.56rem;
letter-spacing: 0.008rem;
color: #333333;
margin-top: 0.3rem;
}
}
}
.empty{
text-align: center;
img{
width: 5.56rem;
height: 4.653rem;
margin-bottom: 0.68rem;
}
p{
font-size: 0.373rem;
line-height: 0.448rem;
color: #999999;
}
}
}
</style>

28
历届学生/font-end-nine/项目练习/上课项目/在包河/src/config/index.js Normal file
View File

@@ -0,0 +1,28 @@
export default {
devBaseUrl: 'http://127.0.0.1:3000/api/json',
prodBaseUrl: '',
apiList: {
radio: '/radio',
tv: '/tv',
tvInfo: '/tvInfo',
videoPlay: '/videoPlay',
comment:'/comment',
post:'/post',
Swipe:'/Swpie',
live:'/live'
},
checkBaseUrl() {
switch (process.env.NODE_ENV) {
case "development":
return this.devBaseUrl
break;
case "production":
return this.prodBaseUrl
break;
default:
break;
}
}
}

27
历届学生/font-end-nine/项目练习/上课项目/在包河/src/main.js Normal file
View File

@@ -0,0 +1,27 @@
import 'amfe-flexible'
import Vue from 'vue'
import App from './App'
import router from './router'
import _ from './serve/_'
import Video from './components/Video'
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.prototype.$http = _
Vue.component('cvideo', Video)
Vue.config.productionTip = false
Vue.use(Vant);
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

13
历届学生/font-end-nine/项目练习/上课项目/在包河/src/page/About.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="about">我的</div>
</template>
<script>
export default {
}
</script>
<!-- <style lang="less" scoped>
@import "~@page/About";
</style> -->

88
历届学生/font-end-nine/项目练习/上课项目/在包河/src/page/Home.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<div class="home">
<van-tabs v-model="active" swipeable animated line-width="0.32rem" border>
<van-tab title="包河Radio">
<Radio></Radio>
</van-tab>
<van-tab title="包河TV">
<TV></TV>
</van-tab>
<van-tab title="融媒直播">
<Live></Live>
</van-tab>
</van-tabs>
<!-- <discuss></discuss> -->
</div>
</template>
<script>
import Radio from "@/components/Radio"
import TV from "@/components/TV"
import Live from "@/components/Live"
// import recommend from "@/components/recommend"
export default {
data() {
return {
active: 0,
// number: 0,
// thisTitle:'相关推荐',
// data:[
// {
// content:'台达伺服电机ASDA-B3',
// creatTime: new Date().getTime(),
// image:'https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500',
// },
// {
// content:'台达伺服电机ASDA-B3',
// creatTime: new Date().getTime(),
// image:'https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500',
// },
// {
// content:'台达伺服电机ASDA-B3',
// creatTime: new Date().getTime(),
// image:'https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500',
// }
// ]
}
},
created() {
// this.getData()
},
methods: {
async getData() {
var res = await this.$http.index.getMechanismList({
page: 1,
id: 82
});
console.log(res);
},
// isclick(data){
// console.log('data====',data);
// }
},
components: {
Radio,
TV,
Live,
// recommend,
// discuss
}
}
</script>
<!-- <style lang="less" scoped>
@import "~@page/Home";
</style> -->

97
历届学生/font-end-nine/项目练习/上课项目/在包河/src/page/TvInfo.vue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<div class="TvInfo">
<toubu></toubu>
是
<cvideo v-if="videoSrc.length != 0" :url="videoSrc"></cvideo>
<van-tabs v-model="active" border>
<van-tab title="频道">
<TvList :show="true" :arr="info.list" @click="message"></TvList>
</van-tab>
<van-tab title="评论">
<comment :title="isTitle" :list="Data"></comment>
<ztcomment :title="isTitle" :list="Data"></ztcomment>
<!-- <comment :arr="Data"></comment> -->
</van-tab>
</van-tabs>
<discuss></discuss>
</div>
</template>
<script>
import TvList from '@/components/TvList'
import ztcomment from '@/components/ztcomment'
// import comment from '@/components/comment'
import discuss from '@/components/discuss'
import toubu from '@/components/toubu'
export default {
name: 'TvInfo',
data () {
return {
videoSrc: [],
info: {},
active: 0,
isTitle:'全部评论',
Data:[],
id:this.$route.query.id
}
},
created() {
this.getTvInfo()
},
watch:{
'id':{
handler(n,o){
console.log('n',n);
if(n){
this.getTvInfo()
}
},
// deep:true,
// immediate:true
}
},
methods: {
async getTvInfo() {
this.info = await this.$http.index.tvInfo({
id: this.$route.query.id
});
this.videoSrc = [
{
type: "application/x-mpegURL",
src: this.info.current.play_url
}
]
this.Data = this.info.current.comment_list
},
message(id){
let current = this.info.list.filter(item => item.id == id)
this.videoSrc = [
{
type: "application/x-mpegURL",
src: current[0].play_url
}
]
this.Data = current[0].comment_list
}
},
components: {
TvList,
ztcomment,
// comment,
discuss,
toubu
}
}
</script>
<style scoped lang="less">
</style>

80
历届学生/font-end-nine/项目练习/上课项目/在包河/src/page/post.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<div class="post">
<toubu></toubu>
<div class="info">
<div class="top">
<img src="@sta/gw_img_logo.png" alt="">
<div class="t_right">
<div class="name">张三</div>
<div class="time">2012</div>
</div>
</div>
<div class="content">
撒谎思阿德hi赛道海撒打
算大是滴哈是的哈撒谎思阿德hi赛道海撒打算大是滴哈是的哈嗲
</div>
</div>
<discuss></discuss>
</div>
</template>
<script>
import discuss from "@/components/discuss"
import toubu from "@/components/toubu"
export default {
name: 'post',
data () {
return {
post:{}
}
},
created() {
this.getpost()
},
methods: {
async getpost() {
this.post = await this.$http.index.post();
console.log(this.post)
}
},
components: {
discuss,toubu
}
}
</script>
<style scoped lang="less">
.info {
.top {
display: flex;
align-items: center;
justify-content: center;
img {
width: 1rem;
height: 1.093rem;
}
.t_right {
.name {
font-size: 0.373rem;
color: #333333;
}
.time {
font-size: 0.32rem;
color: #999999;
}
}
}
.content {
font-size: 0.427rem;
color: #333333;
}
}
</style>

181
历届学生/font-end-nine/项目练习/上课项目/在包河/src/page/qwervideo.vue Normal file
View File

@@ -0,0 +1,181 @@
<template>
<div>
<toubu></toubu>
<cvideo class="ccc" :url="play_url"></cvideo>
<div class="qwervideo">
<div class="top">
<!-- <span>香港24小时|8月25日发生了什么？暴力局面再次升级</span> -->
<span>{{ videoPlay.play_desc }}</span>
<div class="time">{{ videoPlay.play_time }}</div>
</div>
<div class="down">
<div class="bbb">
<li>
<img src="@sta/collection-icon.png" alt="" />
<span>收藏</span>
</li>
<li>
<img src="@sta/give_thumbs-up.png" alt="" />
<span>{{ videoPlay.play_fabulous }}</span>
</li>
</div>
<div class="aaa">
<span>简介</span>
<img
@click="getshow"
v-if="!showFul"
src="@sta/open-close.png"
alt=""
/>
<img
@click="getshow"
v-if="showFul"
src="@sta/open-just.png"
alt=""
/>
</div>
</div>
<div class="content_a" v-if="showFul">
{{ videoPlay.play_title }}
</div>
</div>
<recommend
:title="istitle"
:list="data"
:number="number"
@click="click()"
></recommend>
<comment></comment>
<discuss></discuss>
</div>
</template>
<script>
import discuss from "@/components/discuss";
import toubu from "@/components/toubu";
import recommend from "@/components/recommend";
import comment from "@/components/comment";
export default {
name: "videoPlay",
data() {
return {
videoPlay: {},
play_url: [],
istitle: "相关推荐",
data: [],
number: 1,
showFul: false,
};
},
created() {
this.getVideo();
},
methods: {
async getVideo() {
this.videoPlay = await this.$http.index.videoPlay();
// this.play_url = this.videoPlay.play_url
this.play_url.push({
type: "application/x-mpegURL",
src: this.videoPlay.play_url,
});
this.data = this.videoPlay.relevantRecommendations;
// this.data = [
// {
// index:0,
// content : content,
// }
// ]
console.log(this.videoPlay);
},
click() {
console.log(2);
},
getshow() {
this.showFul = !this.showFul;
},
},
components: {
discuss,
toubu,
recommend,
comment,
},
};
</script>
<style scoped lang="less">
.ccc {
margin-top: 1.33rem;
}
.content_a {
font-size: 0.42rem;
line-height: 0.76rem;
color: #999999;
}
.qwervideo {
margin: 0px 0.32rem 0 0.307rem;
.top {
span {
height: 1.173rem;
font-size: 0.48rem;
line-height: 0.76rem;
color: #333333;
}
.time {
font-family: PingFangSC-Medium;
font-size: 0.307rem;
line-height: 0.576rem;
color: #999999;
}
}
.down {
align-items: center;
display: flex;
justify-content: space-between;
.bbb {
align-items: center;
display: flex;
li {
list-style: none;
margin-right: 20px;
img {
width: 0.347rem;
height: 0.36rem;
}
span {
font-family: PingFangSC-Medium;
font-size: 0.32rem;
line-height: 0.384rem;
color: #999999;
}
}
}
.aaa {
img {
height: 0.2rem;
width: 0.35rem;
}
span {
font-family: PingFangSC-Medium;
font-size: 0.32rem;
line-height: 0.384rem;
color: #999999;
}
}
}
}
</style>

34
历届学生/font-end-nine/项目练习/上课项目/在包河/src/router/index.js Normal file
View File

@@ -0,0 +1,34 @@
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "Home" */ '@/page/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "About" */ '@/page/About.vue')
},
{
path: '/TvInfo',
name: 'TvInfo',
component: () => import(/* webpackChunkName: "TvInfo" */ '@/page/TvInfo.vue')
},
{
path: '/qwervideo',
name: 'qwervideo',
component: () => import(/* webpackChunkName: "qwervideo" */ '@/page/qwervideo.vue')
},
{
path: '/post',
name: 'post',
component: () => import(/* webpackChunkName: "qwervideo" */ '@/page/post.vue')
}
]
})

5
历届学生/font-end-nine/项目练习/上课项目/在包河/src/serve/_.js Normal file
View File

@@ -0,0 +1,5 @@
import HomeServe from "./home";
export default {
index: new HomeServe()
}

0
历届学生/font-end-nine/项目练习/上课项目/在包河/src/serve/car.js Normal file
View File

43
历届学生/font-end-nine/项目练习/上课项目/在包河/src/serve/home.js Normal file
View File

@@ -0,0 +1,43 @@
import api from "@/api/api";
import config from "@/config";
export default class HomeServe {
async radio(data = {}, header = {}) {
return await api.getRequest({
url: config.apiList.radio,
data, header
})
}
async tv(data = {}, header = {}) {
return await api.getRequest({
url: config.apiList.tv,
data, header
})
}
async tvInfo(data = {}, header = {}) {
return await api.getRequest({
url: config.apiList.tvInfo,
data, header
})
}
async videoPlay(data = {}, header = {}) {
return await api.getRequest({
url: config.apiList.videoPlay,
data, header
})
}
async post(data = {}, header = {}) {
return await api.getRequest({
url: config.apiList.post,
data, header
})
}
async live(data = {}, header = {}) {
return await api.getRequest({
url: config.apiList.live,
data, header
})
}
}