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,18 @@
<template>
<div id="app">
<img src="../static/logo.png">
<router-link to="/">首页</router-link>
<router-link to="/about">我的</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
@import "~@mixins/clear";
</style>

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.result
break;
case 404:
Toast.fail(response.data.msg);
throw new Error(response.data.msg);
break;
default:
break;
}
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
}
}
export default new Api()

View File

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

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;

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;

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%;
}

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);
}

View File

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

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>

View File

@@ -0,0 +1,85 @@
<template>
<div class="comment_box">
<div class="title">{{ title }}</div>
<div class="comment_list">
<div class="comment_item" v-for="(item ,index) in list" :key="index">
<img :src="item.imgurl" alt="">
<div class="item_right">
<div class="name">
<div class="uer_name">
{{item.userName}}
</div>
<p @click="good(item)">
<span :style="item.isLike ? 'color:red' :'color:green'">点赞</span>
<span>{{ item.goodNumber }}</span>
</p>
</div>
<div class="content">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
props:{
title:{
type:String,
defalut:()=>{
return ''
}
},
list:{
type:Array,
defalut:()=>{
return []
}
}
},
created () {
},
methods: {
good(item){
console.log('dianji');
item.isLike = !item.isLike
//
if(item.isLike){
item.goodNumber += 1
}else{
item.goodNumber -= 1
}
}
}
}
</script>
<style lang="less">
.comment_box{
.title{
height: 1.347rem;
background-color: #ffffff;
font-size: 0.427rem;
line-height: 1.347rem;
color: #333333;
padding-left: 0.32rem;
}
.comment_list{
padding: 0 0.30rem;
.comment_item{
}
}
}
</style>

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(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>

View File

@@ -0,0 +1,137 @@
<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">
<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:{
}
}
</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>

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,48 @@
<template>
<div class="home">
<h2>首页</h2>
<van-button type="info">信息按钮</van-button>
<comment-list :title="thisTitle" :list="data"></comment-list>
</div>
</template>
<script>
import commentList from '../compents/comment-list.vue';
export default {
data() {
return {
thisTitle:'最新评价',
data:[
{
imgurl:'https://img0.baidu.com/it/u=2299509922,2958741581&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658077200&t=c4f3b2f9b5d962a89bbeb7368cbf370d',
userName:'test1',
goodNumber:123,
isLike:true,
time:'13'
}
]
}
},
created() {
// this.getData()
},
components: {
commentList
},
methods: {
async getData() {
var res = await this.$http.index.getMechanismList({
page: 1,
id: 82
});
console.log(res);
}
}
}
</script>
<style lang="less" scoped>
@import "~@page/Home";
</style>

View File

@@ -0,0 +1,84 @@
<template>
<div class="TvInfo">
<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> -->
</van-tab>
</van-tabs>
</div>
</template>
<script>
import TvList from '@/components/TvList'
import comment from '@/components/ztcomment'
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,comment
}
}
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,19 @@
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')
}
]
})

View File

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

View File

@@ -0,0 +1,33 @@
import api from "@/api/api";
import config from "@/config";
export default class HomeServe {
async getMechanismList(data = {}, header = {}) {
return await api.getRequest({
url: config.apiList.mechanismList,
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 ssss(data = {}, header = {}) {
return await api.postRequest({
url: config.apiList.ssss,
data, header
})
}
}