Skip to content

Y
YoubiliProject

代码敲不队 / YoubiliProject

通知 7
Star 1
Fork 0
Y
YoubiliProject

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 fe19fe8f 编写于 作者: 喷火的神灵's avatar 喷火的神灵 🎱
浏览文件
操作

设计部分

上级 cb2e8e44
展开全部 隐藏空白更改
内联 并排
Showing with 0 addition and 24208 deletion
YouBili_front/README.md 已删除 100644 → 0
浏览文件 @ cb2e8e44
# group
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
YouBili_front/babel.config.js 已删除 100644 → 0
浏览文件 @ cb2e8e44
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
YouBili_front/jsconfig.json 已删除 100644 → 0
浏览文件 @ cb2e8e44
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
YouBili_front/package-lock.json 已删除 100644 → 0
浏览文件 @ cb2e8e44
此差异已折叠。
YouBili_front/package.json 已删除 100644 → 0
浏览文件 @ cb2e8e44
{
"name": "group",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ant-design-vue": "^1.7.2",
"axios": "^1.4.0",
"cookie-session": "^2.0.0",
"core-js": "^3.8.3",
"dplayer": "^1.27.1",
"element-ui": "^2.15.13",
"hls.js": "^1.4.4",
"plyr": "^3.7.8",
"vue": "^2.6.14",
"vue-dplayer": "^0.0.10",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
}
}
YouBili_front/src/App.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<template>
<div id="app">
<!-- <handder></handder>-->
<!-- <div id="content">-->
<!-- <sidebar-vue></sidebar-vue>-->
<!-- <div class="i_w">-->
<router-view/>
<!-- </div>-->
<!-- -->
<!-- </div>-->
</div>
</template>
<script>
export default {
}
</script>
<style>
* {
padding: 0;
margin: 0;
text-decoration: none;
border: 0;
}
#content {
display: flex;
justify-content: flex-start;
}
.i_w {
margin-left: 250px;
margin-top: 60px;
width:calc(100%- 250px);
/* margin: 60px auto; */
}
</style>
YouBili_front/src/components/Handder.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--头部导航栏-->
<template>
<div id="box">
<div id="left">
<!-- <div>
<i class="el-icon-s-fold"></i>
</div> -->
<div>
<el-image :src="src"></el-image>
</div>
</div>
<div>
<el-autocomplete
class="inline-input"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
>
<i
class="el-icon-search el-input__icon"
slot="suffix">
</i>
</el-autocomplete>
</div>
<div id="right">
<div class="popover" v-if="!isLogin">
<!-- 头像 -->
<el-popover
placement="bottom"
title=""
width="300"
trigger="hover"
content="">
<el-avatar slot="reference" :size="40" :src="userImg"></el-avatar>
<div>
<h4>登录以后你可以:</h4>
<el-row :gutter="30">
<el-col :span="11">
<p class="p-m"><i class="el-icon-monitor"></i> 免费看高清视频</p>
</el-col>
<el-col :span="13">
<p class="p-m"><i class="el-icon-time"></i> 多端同步播放记录</p>
</el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="11">
<p class="p-m"><i class="el-icon-chat-dot-square"></i> 发表弹幕/评论</p>
</el-col>
<el-col :span="13">
<p class="p-m"><i class="el-icon-video-play"></i> 热门番剧影视看不停</p>
</el-col>
</el-row>
<el-button style="width:100%" type="primary" @click="dialogVisible=true">立即登录</el-button>
</div>
</el-popover>
</div>
<div class="popover" v-else>
<el-popover
placement="bottom"
title=""
width="300"
trigger="hover"
content="">
<el-avatar class="avatar" slot="reference" :size="40" :src="userImg1"></el-avatar>
<div class="myCenter">
<h3>用户昵称</h3>
<div class="nick-sty">
<div>
<p>144</p>
<span>关注</span>
</div>
<div>
<p>12</p>
<span>粉丝</span>
</div>
<div>
<p>123</p>
<span>动态</span>
</div>
</div>
<p><i style="margin-right: 20px;font-size: 20px;" class="el-icon-user"></i>个人中心</p>
<!-- <el-divider></el-divider> -->
<p><i style="margin-right: 20px;font-size: 20px;" class="el-icon-switch-button"></i>退出登录</p>
</div>
</el-popover>
</div>
<el-popover
placement="bottom"
title=""
width="350"
trigger="hover"
content="">
<div slot="reference" ref="collect" @mouseover="handleMouseOver" class="sc_cls">
<i class="el-icon-star-off"></i>
<p>收藏</p>
</div>
<div class="big-box">
<div v-for="(v,i) of scList" :key="i" class="sc-box">
<!-- 图片 -->
<div>
<img width="120px" height="100%" :src="v.img" alt="">
</div>
<div class="sc-content">
<div>
<h4>{{ v.title }}</h4>
</div>
<div>
<p>{{ v.name }}</p>
</div>
</div>
</div>
</div>
</el-popover>
<el-popover
placement="bottom"
title=""
width="350"
trigger="hover"
content="">
<div slot="reference" class="sc_cls">
<i class="el-icon-time"></i>
<p>历史</p>
</div>
<div class="big-box">
<div v-for="(v,i) of lsList" :key="i" class="sc-box">
<!-- 图片 -->
<div>
<img width="120px" height="100%" :src="v.img" alt="">
</div>
<div class="sc-content">
<div>
<h4>{{ v.title }}</h4>
</div>
<div>
<p>{{ v.time }}</p>
</div>
<div>
<p>{{ v.name }}</p>
</div>
</div>
</div>
</div>
</el-popover>
<div>
<el-button type="primary" icon="el-icon-upload">投稿</el-button>
</div>
</div>
<!-- 登录的弹窗 -->
<login :isTrue="dialogVisible" @close="dialogVisible=false"></login>
</div>
</template>
<script>
import login from "./login"
export default {
name: "handder",
components: {
login
},
data() {
return {
isLogin: false,
dialogVisible: false, // 登录注册弹窗
src: null, // 图片路径
restaurants: [], // 输入框模糊查询出的数据 需要后台传输
state1: '', // 用户选中的数据
userImg: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
userImg1: "https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png",
scList: [
{
img:"https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png",
title: "蜘蛛侠",
name: "彼得帕克"
},
{
img:"https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png",
title: "蝙蝠侠",
name: "彼得帕克"
},
{
img:"https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png",
title: "钢铁侠",
name: "彼得帕克"
},
{
img:"https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png",
title: "闪电侠",
name: "彼得帕克"
},
{
img:"https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png",
title: "绿箭侠",
name: "彼得帕克"
},
{
img:"https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png",
title: "蜘蛛侠",
name: "彼得帕克"
},
],
lsList: [
{
img:"https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415062311645.png",
title: "蜘蛛侠",
time: "2023-02-10",
name: "彼得帕克"
},
{
img:"https://uploadstatic.mihoyo.com/contentweb/20200120/2020012017544296758.jpg",
title: "蝙蝠侠",
time: "2023-02-10",
name: "彼得帕克"
},
{
img:"https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png",
title: "钢铁侠",
time: "2023-02-10",
name: "彼得帕克"
},
{
img:"https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415075614503.png",
title: "闪电侠",
time: "2023-02-10",
name: "彼得帕克"
},
{
img:"https://uploadstatic.mihoyo.com/contentweb/20200509/2020050914430985995.jpg",
title: "绿箭侠",
time: "2023-02-10",
name: "彼得帕克"
},
{
img:"https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png",
title: "蜘蛛侠",
time: "2023-02-10",
name: "彼得帕克"
},
],
}
},
methods: {
// 鼠标移动到收藏的时候 发生的变化
handleMouseOver() {
let sLeft = this.$refs.collect.clientLeft;
let sTop = this.$refs.collect.clientTop;
console.log(sLeft, sTop,this.$refs.collect);
},
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
},
// 用户输入内容筛选
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
// 输入框方法
handleSelect(item) {
console.log(item);
},
// 需要后台输入的
loadAll() {
return [
{value:"选择1",index:1},
{value:"选择2",index:2},
{value:"选择3",index:3},
{value:"选择4",index:4},
{value:"选择5",index:5}
]
},
},
created() {
},
mounted() {
this.restaurants = this.loadAll();
}
}
</script>
<style scoped>
i{
cursor: pointer;
}
#box {
position: fixed;
top: 0;
left: 0;
background: #fff;
height: 60px;
width: 100%;
min-width: 1200px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 99999;
}
#left {
width: 200px;
display: flex;
justify-content: space-around;
align-items: center;
}
#right {
width: 300px;
display: flex;
justify-content: space-around;
align-items: center;
}
.sc_cls {
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
position: relative;
}
.sc_cls i {
transform: rotate(0deg);
transition: all .3s ease;
}
.sc_cls:hover i {
/* transform: rotate(360deg); */
transform: translateY(-4px);
}
.sc_cls p {
font-size: 12px;
}
.el-autocomplete {
width: 580px;
}
.popover {
cursor: pointer;
}
.p-m {
margin: 10px 0;
cursor: pointer;
font-weight: bold;
}
.p-m i {
font-size: 15px;
}
.big-box {
overflow-y: auto;
height: 400px;
}
.sc-box {
padding: 10px 0;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
transition: all .3s;
cursor: pointer;
}
.sc-box:hover {
background: #f1f2f3;
}
.sc-box>div {
height: 60px;
}
.sc-content {
height: 100%;
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.sc-content p {
font-size: 13px;
}
.avatar {
transition: all .3s;
}
.popover:hover .avatar {
/* transform: scale(2) translateX(-25%); */
}
.myCenter {
text-align: center;
}
.myCenter>p {
cursor: pointer;
text-align: left;
border-radius: 5px;
line-height: 35px;
padding-left: 20px;
}
.myCenter>p:hover {
background: #E3E5E7;
}
.nick-sty {
padding: 20px;
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nick-sty p {
font-size: 16px;
font-weight: bold;
}
.nick-sty span {
font-size: 12px;
}
</style>
\ No newline at end of file
YouBili_front/src/components/login.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<template>
<!-- 登录的弹窗 -->
<el-dialog title="" width="600px" :visible="isTrue" @close="$emit('close')">
<el-tabs style="margin:0 auto" type="border-card">
<el-tab-pane style="height: 450px" label="登录">
<el-form :model="login" status-icon :rules="loginRules" ref="login" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="login.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="login.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginForm('login')">登录</el-button>
<el-button @click="resForm('login')">重置</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane style="height: 450px" label="注册">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="ruleForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPassword">
<el-input type="password" v-model="ruleForm.checkPassword" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="昵称" prop="nickname">
<el-input type="text" v-model="ruleForm.nickname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input type="text" v-model="ruleForm.email" autocomplete="off"></el-input>
</el-form-item>
<!--获取验证码-->
<el-form-item prop="code">
<div class="bind_code margin_top">
<el-input
class="bind_code_input code"
v-model="ruleForm.code"
type="text"
placeholder="请输入验证码"
/>
<el-button
@click.native.prevent="bindforgetSendCode('ruleForm')"
class="bind_code_gain"
:disabled="disabled"
>{{ btnText }}</el-button>
<!-- <img-->
<!-- class="login-icon"-->
<!-- src=""-->
<!-- alt=""-->
<!-- />-->
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</el-dialog>
</template>
<script>
import {
login, // 登录
vaildEmail, // 发送验证码
register, // 注册
} from "@/utils/option";
export default {
name: "login",
props: {
isTrue: Boolean,
},
data() {
var validatePassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPassword !== '') {
this.$refs.ruleForm.validateField('checkPassword');
}
callback();
}
};
var validatePassword2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
disabled: false,
btnText: "发送验证码",
dialogVisible: true,
login: {
username: '', // 登录要输入的用户名
password: '' // 登录要输入的密码
},
ruleForm: {
username: '', // 用户名
password: '', // 密码
checkPassword: '', // 再次输入密码
nickname: '', // 昵称
code: '', // 验证码
email: '', // 邮箱
},
message: "",
// 验证规则
loginRules: {
username: [
{ required: true, message: "请输入用户名", trigger: 'blur'}
],
password: [
{ required: true, message: "请输入密码", trigger: 'blur'}
]
},
rules: {
username: [
{ required: true, message: "请输入用户名", trigger: 'blur'}
],
password: [
{ validator: validatePassword, trigger: 'blur' },
{ required: true }
],
checkPassword: [
{ validator: validatePassword2, trigger: 'blur' },
{ required: true }
],
code: [
{ required: true, message: "请输入短信验证码", trigger: "blur" },
],
email: [
{ required: true, message: "请输入邮箱", trigger: "blur" },
],
nickname: [
{ required: true, message: "请输入昵称", trigger: "blur" },
],
},
}
},
methods: {
// 提交按钮
//forName 当用户输入为空时,会提示用户名和密码不能为空
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 注册
register({...this.ruleForm,sessionId: this.message}).then(res => {
if (res.status == 200) {
this.$message.success(res.message)
this.$emit('close');
} else {
this.$message.error(res.message)
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
// 重置按钮
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 登录按钮
loginForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('login!');
// 登录成功之后给弹窗隐藏
login(this.login).then(res => {
if (res.status == 200) {
this.$message.success(res.message)
this.$emit('close');
}
})
} else {
console.log('error login!!');
return false;
}
});
},
// 重置按钮
resForm(formName) {
this.$refs[formName].resetFields();
},
// 发送验证码
bindforgetSendCode(formName) {
//手机号 为空的话
this.$refs[formName].validateField("email",(valid) => {
if (!valid) {
this.$message("已发送验证码，请查收");
this.disabled = true;
this.btnText = "请稍候...";
setTimeout(() => {
this.doLoop(60);
}, 500);
// 发送验证码请求
vaildEmail({email:this.ruleForm.email}).then(res => {
if (res.status == 200) {
this.$message.success("邮件已发送");
this.message = res.message;
} else {
this.$message.error(res.message);
}
})
} else {
return false;
}
});
},
// 手机验证码的倒计时
doLoop: function (seconds) {
seconds = seconds ? seconds : 60;
this.btnText = seconds + "s后获取";
// this.code = code
let countdown = setInterval(() => {
if (seconds > 0) {
this.btnText = seconds + "s后获取";
--seconds;
} else {
this.btnText = "获取验证码";
this.disabled = false;
clearInterval(countdown);
}
}, 1000);
},
}
}
</script>
<style scoped>
.bind_code {
position: relative;
}
.bind_code .el-input__inner {
width: 328px;
height: 44px;
background: #f7f7f7;
border-radius: 4px;
border: 1px solid #e4e4e4;
outline: none;
padding: 0 100px 0 10px;
}
.bind_code .code /deep/.el-input__suffix {
right: 97px;
}
.bind_code .el-button {
border: 0;
background: none;
padding: 0;
border-radius: 0;
}
.bind_code .pic {
width: 80px;
height: 25px;
border-left: none !important;
}
.bind_code .bind_code_gain {
position: absolute;
top: calc(50% - 9px);
right: 10px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #20aee5;
line-height: 18px;
cursor: pointer;
padding-left: 10px;
border-left: 1px solid #d8d8d8;
}
.bind_code .login-icon {
width: 16px;
height: 16px;
position: absolute;
top: 14px;
left: 16px;
}
</style>
\ No newline at end of file
YouBili_front/src/components/sidebar.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--侧边栏-->
<template>
<div>
<el-menu
id="sidebar"
class="el-menu-vertical-demo"
default-active="2"
style="height:90vh"
@close="handleClose"
@open="handleOpen"
>
<router-link to="/">
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span slot="title">
首页
</span>
</el-menu-item>
</router-link>
<router-link to="/showHot">
<el-menu-item index="2">
<i class="el-icon-document"></i>
<span slot="title">热门</span>
</el-menu-item>
</router-link>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span slot="title">动态</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">通知</span>
</el-menu-item>
<el-submenu index="5">
<template slot="title">
<i class="el-icon-location"></i>
<span>分类</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="5-1">选项1</el-menu-item>
<el-menu-item index="5-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="5-3">选项3</el-menu-item>
</el-menu-item-group>
<!-- <el-submenu index="5-4">
<template slot="title">选项4</template>
<el-menu-item index="5-4-1">选项1</el-menu-item>
</el-submenu> -->
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
name: "sidebar",
data() {
return {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
handleClick(tab, event) {
console.log(tab, event);
}
}
},
created() {
console.log(this.$router.options.routes)
}
}
</script>
<style scoped>
* {
padding: 0;
margin: 0;
}
#sidebar {
position: fixed;
top: 60px;
left: 0;
width: 250px;
}
</style>
\ No newline at end of file
YouBili_front/src/main.js 已删除 100644 → 0
浏览文件 @ cb2e8e44
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
import store from './store'
import VueDPlayer from "vue-dplayer";
import "vue-dplayer/dist/vue-dplayer.css";
import axios from "axios";
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/dist/antd.css';
// Vue.use(axios);
Vue.prototype.axios = axios;
Vue.component(Button.name, Button);
Vue.use(VueDPlayer);
Vue.use(ElementUI);
Vue.config.productionTip = false
axios.defaults.baseURL = 'http://localhost:8089'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
YouBili_front/src/router/index.js 已删除 100644 → 0
浏览文件 @ cb2e8e44
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
//首页
path: '/',
name: 'index',
component: () => import('../views/show/IndexView.vue')
},
{
//管理员页面
path: '/adminIndex',
name: 'adminIndex',
component: () => import('../views/admin/adminIndex.vue')
},
{
//管理员登录页面
path: '/adminLogin',
name: 'adminLogin',
component:() => import('../views/admin/adminLogin.vue')
},
{
//投稿界面
path: '/contribute',
name: 'contribute',
component:() =>import('../views/contribute/contribute.vue')
},
{
//投稿管理界面
path: '/contributeManage',
name: 'contributeManage',
component:() =>import('../views/contribute/contributeManage.vue')
},
{
//购买界面
path: '/commodity',
name: 'commodity',
component:() =>import('../views/pay/commodity.vue')
},
{
//支付界面
path: '/pay',
name: 'pay',
component:() =>import('../views/pay/pay.vue')
},
{
//收藏界面
path: '/collection',
name: 'collection',
component:() =>import('../views/personal/collection.vue')
},
{
//动态界面
path: '/dynamic',
name: 'dynamic',
component:() =>import('../views/personal/dynamic.vue')
},
{
//粉丝界面
path: '/fans',
name: 'fans',
component:() =>import('../views/personal/fans.vue')
},
{
//关注者界面
path: '/follow',
name: 'follow',
component:() =>import('../views/personal/follow.vue')
},
{
//历史
path: '/history',
name: 'history',
component:() =>import('../views/personal/history.vue')
},
{
//通知
path: '/notify',
name: 'notify',
component:() =>import('../views/personal/notify.vue')
},
{
//他人空间
path: '/otherSpace',
name: 'otherSpace',
component:() =>import('../views/personal/otherSpace.vue')
},
{
//个人中心
path: '/personalCenter',
name: 'personalCenter',
component:() =>import('../views/personal/personalCenter.vue')
},
{
//举报
path: '/report',
name: 'report',
component:() =>import('../views/personal/report.vue')
},
{
//分类
path: '/classification',
name: 'classification',
component:() =>import('../views/show/classification.vue')
},
{
//搜索页
path: '/Search',
name: 'Search',
component:() =>import('../views/show/Search.vue')
},
{
//热门
path: '/showHot',
name: 'showHot',
component:() =>import('../views/show/showHot.vue')
},
{
//登录
path: '/login',
name: 'login',
component:() =>import('../views/user/login.vue')
},
{
//注册
path: '/reg',
name: 'reg',
component:() =>import('../views/user/reg.vue')
},
{
//视频页面
path: '/videoIndex',
name: 'videoIndex',
component:() =>import('../views/video/videoIndex.vue')
},
]
const router = new VueRouter({
routes
})
export default router
YouBili_front/src/store/index.js 已删除 100644 → 0
浏览文件 @ cb2e8e44
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
YouBili_front/src/utils/option.js 已删除 100644 → 0
浏览文件 @ cb2e8e44
import request from '@/utils/request'
/**
*
* @param {*} method 请求方法
* @param {*} url 请求地址
* @param {*} data post、put 请求的参数
* @param {*} params get、delete 请求的参数
* @param {*} config 请求配置，如headers等
*/
// 登录
export function login (params) {
return request({
method: 'post',
url: '/api/auth/login',
data: params
})
}
// 发送验证码
export function vaildEmail (params) {
return request({
method: 'post',
url: '/api/auth/vaild-email',
data: params
})
}
// 注册请求
export function register (params) {
return request({
method: 'post',
url: '/api/auth/register',
data: params
})
}
\ No newline at end of file
YouBili_front/src/utils/request.js 已删除 100644 → 0
浏览文件 @ cb2e8e44
import axios from 'axios'
const instance = axios.create({
// API接口的base_url
baseURL: 'http://localhost:8089',
// 超时时间
timeout: 20000,
// headers配置
headers: {
// 'Content-Type': 'application/json;charset=utf-8',
'Content-Type': 'application/x-www-form-urlencoded',
// 'X-Requested-With': 'XMLHttpRequest'
}
})
instance.interceptors.request.use(
config => {
// 可以在发送请求前做一些对config的处理，例如给headers添加token
const token = sessionStorage.getItem('token')
if (token) {
config.headers['Authorization'] = token
}
return config
},
error => {
// 发送请求错误时做一些处理，例如抛出错误
return Promise.reject(error)
}
)
instance.interceptors.response.use(
response => {
// 对响应数据做些处理，例如验证token是否过期等
return response.data
},
error => {
// 对响应Error做些处理，例如判断响应状态码返回对应错误信息
// if (error.response) {
// switch (error.response.status) {
// case 400:
// error.message = '请求错误(400)'
// break
// case 401:
// error.message = '未授权，请重新登录(401)'
// break
// case 403:
// error.message = '拒绝访问(403)'
// break
// case 404:
// error.message = '请求出错(404)'
// break
// case 408:
// error.message = '请求超时(408)'
// break
// case 500:
// error.message = '服务器错误(500)'
// break
// case 501:
// error.message = '服务未实现(501)'
// break
// case 502:
// error.message = '网络错误(502)'
// break
// case 503:
// error.message = '服务不可用(503)'
// break
// case 504:
// error.message = '网络超时(504)'
// break
// case 505:
// error.message = 'HTTP版本不受支持(505)'
// break
// default:
// error.message = `连接出错(${error.response.status})!`
// }
// } else {
// error.message = '连接服务器失败!'
// }
return Promise.reject(error)
}
)
/**
*
* @param {*} method 请求方法
* @param {*} url 请求地址
* @param {*} data post、put 请求的参数
* @param {*} params get、delete 请求的参数
* @param {*} config 请求配置，如headers等
*/
function request ({ method, url, data = {}, params = {}, headers = {} }) {
return instance({
method,
url,
data,
params,
headers
})
}
export default request
YouBili_front/src/views/admin/adminIndex.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--管理员界面-->
<template>
<div>
<h1>
<router-link to="/">跳转首页</router-link>
</h1>
</div>
</template>
<script>
export default {
name: "adminIndex",
data() {
return {}
},
methods: {},
created() {
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
YouBili_front/src/views/contribute/contribute.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--投稿界面-->
<template>
<div style="display: flex;
justify-content: center;align-items: center; width: calc(100vw - 500px);
height:700px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div style="width: 1000px;height: 600px;margin-top: 20px;position: absolute">
<!-- 页面标题 -->
<h1 style="margin-bottom: 50px;text-align: center;color: #303133;font-family: 'Microsoft YaHei', sans-serif;">
投稿中心</h1>
<!-- 视频标题 -->
<el-form size="medium" label-position="left" ref="form" :model="form" label-width="80px">
<div style="width: 500px">
<el-form-item label="视频标题">
<el-input v-model="form.name"></el-input>
</el-form-item>
</div>
<!-- 视频描述 -->
<div>
<el-form-item label="视频描述">
<el-input v-model="form.name"></el-input>
</el-form-item>
</div>
<!-- 视频分类 -->
<el-form-item label="视频分类">
<el-select v-model="form.region" placeholder="请选择视频分类" @change="change">
<el-option label="电影" value="1"></el-option>
<el-option label="综艺" value="2"></el-option>
<el-option label="搞笑" value="3"></el-option>
<el-option label="动漫" value="4"></el-option>
</el-select>
</el-form-item>
<!-- 标签 -->
<el-form-item>
<el-tag
:key="tag"
v-for="tag in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
</el-form-item>
<!-- 上传封面 -->
<el-form-item label="封面">
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<!-- 上传视频 -->
<el-form-item label="视频">
<video muted autoplay controls style="width: 200px; height: 150px;">
您的浏览器不支持播放此视频.
</video>
<el-upload style="width: 300px"
action="/v1/upload"
accept="video/mp4,video/x-m4v,video/*"
name="file"
limit="1"
:on-success="handleSuccess"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<el-button type="primary">点击上传</el-button>
<div>只能上传mp4文件,且不超过100MB</div>
</el-upload>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "contribute",
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
},
flag: "1",
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: '',
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
}
},
methods: {
onSubmit() {
console.log('submit!');
},
change(key) {
this.flag = key
},
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
},
showInput() {
this.inputVisible = true;
this.$nextTick(() => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleSuccess(){
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
handleClick(tab, event) {
console.log(tab, event);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
dialogImageUrl(){},
},
created() {
}
}
</script>
<style scoped>
.el-form-item {
margin-bottom: 50px;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>
\ No newline at end of file
YouBili_front/src/views/contribute/contributeManage.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--投稿管理界面-->
<template>
<div style="display: flex;
justify-content: center;align-items: center; width: calc(100vw - 500px);
height:700px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div style="width: 1000px;height: 600px;margin-top: 20px;position: absolute">
<h1 style="margin-bottom: 50px;text-align: center;color: #303133;font-family: 'Microsoft YaHei', sans-serif;">
投稿管理</h1>
<el-col span="3">
<el-card style="height: 500px">
<p @click="location.href='personal.html'">个人信息</p>
<p style="color: orange">稿件管理</p>
</el-card>
</el-col>
<el-col span="21">
<el-card>
<!--标签页卡开始-->
<el-tabs type="card">
<el-tab-pane label="视频" name="1"></el-tab-pane>
</el-tabs>
<!--标签页卡结束-->
<!--内容列表开始-->
<el-table :data="contentArr" border>
<el-table-column label="标题" width="150px"
prop="title" align="center"></el-table-column>
<el-table-column label="封面" width="60px">
<template slot-scope="scope">
<img :src="scope.row.imgUrl" width="50px">
</template>
</el-table-column>
<el-table-column label="摘要" width="300px" align="center">
<!-- <template slot-scope="scope">
&lt;!&ndash;scope.row代表当前行对应的数组里面的对象&ndash;&gt;
<div v-html="scope.row.brief"></div>
</template>-->
</el-table-column>
<el-table-column label="类型"
prop="categoryName" align="center"></el-table-column>
<el-table-column label="浏览量"
prop="viewCount" align="center"></el-table-column>
<el-table-column label="回复量"
prop="commentCount" align="center"></el-table-column>
<el-table-column label="上传进度"
prop="upload" align="center"></el-table-column>
<el-table-column label="创建时间" width="300"
prop="createTime" align="center"></el-table-column>
<el-table-column label="操作" width="200px" fixed="right"
align="center">
<template slot-scope="scope">
<el-button size="mini" type="success"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--内容列表结束-->
</el-card>
</el-col>
</div>
</div>
</template>
<script>
export default {
name: "contributeManage",
data() {
return {
type:'1',
contentArr:[
{
"id":11,
"title":"测试",
"brief":"测试",
"imgUrl":"files/a.jpg",
"type":1,
"categoryName":"测试1",
"viewCount":8,
"commentCount":0,
"upload":"正在上传",
"createTime":"2023/03/27 19:51:45"
},
]
}
},
methods: {
handleDelete(i,content){
if (confirm("您确定删除此内容吗?")){
//发出删除请求
axios.post("/v1/contents/"+content.id+"/delete").then(function (response) {
if (response.data.code==1){
v.$message.success("删除完成!");
v.contentArr.splice(i,1);//删除页面中的内容
}
})
}
},
handleEdit(i,content){
location.href="/postArticle.html?id="+content.id;
},
handleClick(tab, event) {
console.log(v.type);
//this不是所有场景都能取代v, 只有在created方法中,this代表的是Vue对象
//其它位置this代表的是window对象
this.loadList(v.type);
},
loadList(type){
//发出获取内容的请求
axios.get("/v1/contents/"+type+"/management").then(function (response) {
if (response.data.code==1){
v.contentArr = response.data.data;
}else{
alert("请先登录!");
location.href = "/login.html";
}
})
}
},
created() {
}
}
</script>
<style scoped>
.center{
width: 1200px;
margin: 0 auto;
}
#footer_center p{
margin: 0;
}
#footer_center h3{
color: white;
}
body{
background-color: rgb(241,242,243);
}
.el-header{
background-color: white;
}
</style>
\ No newline at end of file
YouBili_front/src/views/pay/commodity.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--购买界面-->
<template>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
<div>
<div style="justify-content: center;align-items: center; width: calc(100vw - 500px);
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div id="change_group">
<el-radio-group v-model="radio1">
<el-radio-button label="月度"></el-radio-button>
<el-radio-button label="季度"></el-radio-button>
<el-radio-button label="年度"></el-radio-button>
</el-radio-group>
</div>
<div>
<el-card class="box-card">
<div class="text item">
<router-link to="/pay">
<el-button class="pay_button" type="primary">立即购买</el-button>
</router-link> </div>
</el-card>
</div>
<div>
<el-card class="box-card">
<div class="text item">
<router-link to="/pay">
<el-button class="pay_button" type="primary">立即购买</el-button>
</router-link> </div>
</el-card>
</div>
<div>
<el-card class="box-card">
<div class="text item">
<router-link to="/pay">
<el-button class="pay_button" type="primary">立即购买</el-button>
</router-link>
</div>
</el-card>
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "commodity",
components: {Sidebar, Handder},
data() {
return {
radio1: '月度',
}
},
methods: {
},
created() {
}
}
</script>
<style scoped>
#change_group{
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-size: 14px;
}
.item {
padding: 10px 0;
}
.box-card {
position: relative;
width: 350px;
height: 700px;
margin-top: 30px;
margin-left:100px;
float: left;
}
.pay_button{
position: absolute;
bottom: 30px;
/* 宽度与卡片内容一致 */
width: 300px;
/* 高度为 50px，即按钮的高度 */
height: 50px;
left: 24px;
}
@media screen and (min-width: 1970px){
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px){
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/pay/pay.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--支付界面-->
<template>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
<div style="justify-content: center;align-items: center; width: calc(100vw - 500px);
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div class="wai_d">
<div class="nei_d">
<div class="h">
<h2>会员购买</h2>
</div>
<div class="head_div">
<div>
<div class="title_d">
<h2>YouBili</h2>
<el-tag type="info">待付款</el-tag>
</div>
<p>官方网站: YouBili.com</p>
<p>官方邮箱: xxxxxxxxxx.email</p>
<p>最终解释权归 YouBili 所有，若订单出现争议，请及时联系在线客服咨询处理</p>
</div>
<div class="content_d">
<div>
<h4>注意事项:</h4>
<p class="content_p">1、该商品购买后不支持退款</p>
<p class="content_p">2、存在生效服务的情况下新购服务不会立即生效</p>
<p>3、已购买的服务可到订单中心进行查看</p>
<p>4、若用于非法犯罪行为,官方有权停止提供服务</p>
<p>详细服务条款请查阅《YouBili 服务使用协议》</p>
</div>
<div>
<h4>付款细节:</h4>
<p>订单金额:</p>
<p>支付方式</p>
<p>购买用户:</p>
<p>邮箱地址:</p>
<p>下单时间:</p>
</div>
</div>
<div class="pay_d">
<div>
<el-select v-model="value" placeholder="支付方式">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="price_d">
<p>账户余额:</p>
<p>订单金额:</p>
</div>
</div>
</div>
</div>
<div class="card_d">
<el-card class="box-card">
<div class="text_item">
<el-button class="pay_b" type="info" plain disabled>下载订单</el-button>
<el-button class="pay_b" type="info" plain disabled>打印订单</el-button>
<router-link to="/commodity">
<el-button class="pay_b" type="info">取消订单</el-button>
</router-link>
<el-button class="pay_b" type="primary">确认购买</el-button>
</div>
</el-card>
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "pay",
components: {Sidebar, Handder},
data() {
return {
options: [{
value: '选项1',
label: '微信支付'
}, {
value: '选项2',
label: '支付宝'
}],
value: ''
}
},
methods: {},
created() {
}
}
</script>
<style scoped>
.wai_d{
width: 100%;
display: flex;
justify-content: space-between;
}
.nei_d{
width: 75%;
}
.h {
width: 100%;
margin-top: 2%;
margin-left: 2%;
}
.head_div {
background-color: white;
border: 1px solid #ccc;
border-bottom: none;
width: 100%;
margin-left: 2%;
margin-top: 2%;
}
.card_d{
width: 20%;
margin-top: 5%;
}
.head_div > div {
border-bottom: 1px solid #ccc;
box-sizing: border-box;
padding: 15px;
}
.title_d {
display: flex;
justify-content: space-between;
}
.content_d {
display: flex;
justify-content: space-between;
}
.content_d > div {
width: 40%;
}
.pay_d {
display: flex;
justify-content: space-between;
}
.head_div p {
margin: 5px 0;
}
.price_d {
margin-right: 150px;
}
.text_item{
font-size: 14px;
padding: 18px 0;
}
.pay_b{
width: 100%;
margin: 12px auto;
padding: 10px;
}
.content_p{
color: red;
}
@media screen and (min-width: 1970px){
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px){
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/collection.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--收藏-->
<template>
<div>
<handder></handder>
<Sidebar></Sidebar>
<div style="width: 450px;height: 140px;border: 1px solid darkgrey;position: relative;margin-left: 50px;margin-top: 50px;border-radius: 10px" class="idxs">
<p style="position: absolute;top: 3px;right: 80px;border: 1px solid red;width: 114px;height: 26px;border-radius: 8px;text-align: center">标题</p>
<p style="position: absolute;top: 56px;right: 140px;border: 1px solid red;width: 70px;height: 26px;border-radius: 8px;text-align: center">标题</p>
<p style="position: absolute;top: 60px;right: 30px;border: 1px solid red;width: 40px;height: 20px;border-radius: 8px;text-align: center">描述</p>
<p style="position: absolute;top: 100px;right: 20px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<p style="position: absolute;top: 100px;right: 90px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<p style="position: absolute;top: 100px;right: 160px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<div style="width: 230px;height: 140px;border: 1px solid darkgrey;background-color: darkgrey;position: absolute;right: 235px;top: 0;">
<img src="../../assets/用户.jpg" width="80%" height="80%"></div>
</div>
<div style="width: 450px;height: 140px;border: 1px solid darkgrey;position: relative; left: 600px;top: -142px;border-radius: 10px">
<p style="position: absolute;top: 3px;right: 80px;border: 1px solid red;width: 114px;height: 26px;border-radius: 8px;text-align: center">标题</p>
<p style="position: absolute;top: 56px;right: 140px;border: 1px solid red;width: 70px;height: 26px;border-radius: 8px;text-align: center">标题</p>
<p style="position: absolute;top: 60px;right: 30px;border: 1px solid red;width: 40px;height: 20px;border-radius: 8px;text-align: center">描述</p>
<p style="position: absolute;top: 100px;right: 20px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<p style="position: absolute;top: 100px;right: 90px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<p style="position: absolute;top: 100px;right: 160px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<div style="width: 230px;height: 140px;border: 1px solid darkgrey;background-color: darkgrey;position: absolute;right: 235px;top: 0;">
<img src="../../assets/用户.jpg" width="80%" height="80%"></div>
</div>
<div style="width: 450px;height: 140px;border: 1px solid darkgrey;position: relative;margin-left: 40px;margin-top: 40px;top:-140px;left: 10px;border-radius: 10px">
<p style="position: absolute;top: 3px;right: 80px;border: 1px solid red;width: 114px;height: 26px;border-radius: 8px;text-align: center">标题</p>
<p style="position: absolute;top: 56px;right: 140px;border: 1px solid red;width: 70px;height: 26px;border-radius: 8px;text-align: center">标题</p>
<p style="position: absolute;top: 60px;right: 30px;border: 1px solid red;width: 40px;height: 20px;border-radius: 8px;text-align: center">描述</p>
<p style="position: absolute;top: 100px;right: 20px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<p style="position: absolute;top: 100px;right: 90px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<p style="position: absolute;top: 100px;right: 160px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<div style="width: 230px;height: 140px;border: 1px solid darkgrey;background-color: darkgrey;position: absolute;right: 235px;top: 0;">
<img src="../../assets/用户.jpg" width="80%" height="80%"></div>
</div>
<div style="width: 450px;height: 140px;border: 1px solid darkgrey;position: relative;margin-left: 40px;margin-top: 40px;left: 560px;top: -320px;border-radius: 10px">
<p style="position: absolute;top: 3px;right: 80px;border: 1px solid red;width: 114px;height: 26px;border-radius: 8px;text-align: center">标题</p>
<p style="position: absolute;top: 56px;right: 140px;border: 1px solid red;width: 70px;height: 26px;border-radius: 8px;text-align: center">标题</p>
<p style="position: absolute;top: 60px;right: 30px;border: 1px solid red;width: 40px;height: 20px;border-radius: 8px;text-align: center">描述</p>
<p style="position: absolute;top: 100px;right: 20px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<p style="position: absolute;top: 100px;right: 90px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<p style="position: absolute;top: 100px;right: 160px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<div style="width: 230px;height: 140px;border: 1px solid darkgrey;background-color: darkgrey;position: absolute;right: 235px;top: 0;">
<img src="../../assets/用户.jpg" width="80%" height="80%"></div>
</div>
<div style="width: 450px;height: 140px;border: 1px solid darkgrey;position: relative;margin-left: 40px;margin-top: 40px;top:-320px;right: -9px;border-radius: 10px">
<p style="position: absolute;top: 3px;right: 80px;border: 1px solid red;width: 114px;height: 26px;border-radius: 8px;text-align: center">标题</p>
<p style="position: absolute;top: 56px;right: 140px;border: 1px solid red;width: 70px;height: 26px;border-radius: 8px;text-align: center">标题</p>
<p style="position: absolute;top: 60px;right: 30px;border: 1px solid red;width: 40px;height: 20px;border-radius: 8px;text-align: center">描述</p>
<p style="position: absolute;top: 100px;right: 20px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<p style="position: absolute;top: 100px;right: 90px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<p style="position: absolute;top: 100px;right: 160px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<div style="width: 230px;height: 140px;border: 1px solid darkgrey;background-color: darkgrey;position: absolute;right: 235px;top: 0;">
<img src="../../assets/用户.jpg" width="80%" height="80%"></div>
</div>
<div style="width: 450px;height: 140px;border: 1px solid darkgrey;position: relative;margin-left: 40px;margin-top: 40px;left: 560px;top: -500px;border-radius: 10px">
<p style="position: absolute;top: 3px;right: 80px;border: 1px solid red;width: 114px;height: 26px;border-radius: 8px;text-align: center">标题</p>
<p style="position: absolute;top: 56px;right: 140px;border: 1px solid red;width: 70px;height: 26px;border-radius: 8px;text-align: center">标题</p>
<p style="position: absolute;top: 60px;right: 30px;border: 1px solid red;width: 40px;height: 20px;border-radius: 8px;text-align: center">描述</p>
<p style="position: absolute;top: 100px;right: 20px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<p style="position: absolute;top: 100px;right: 90px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<p style="position: absolute;top: 100px;right: 160px;border: 1px solid red;width: 50px;height: 20px;border-radius: 8px;text-align: center; font-size: 6px;">视频描述</p>
<div style="width: 230px;height: 140px;border: 1px solid darkgrey;background-color: darkgrey;position: absolute;right: 235px;top: 0;">
<img src="../../assets/用户.jpg" width="80%" height="80%"></div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "collection",
components: {Sidebar, Handder},
data() {
return {}
},
methods: {},
created() {
}
}
</script>
<style scoped>
@media screen and (min-width: 1970px) {
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px) {
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/dynamic.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--动态-->
<template>
<div>动态
<Handder></Handder>
<Sidebar></Sidebar>
<div style="width: 450px;height: 140px;border: 1px solid darkgrey;position: relative;margin-left: 50px;margin-top: 50px" class="idxs">
<p style="position: absolute;top: 20px;right: 80px">视频描述</p>
<div style="width: 230px;height: 140px;border: 1px solid darkgrey;background-color: darkgrey;border-radius: 15px;position: absolute;right: 235px;top: 0;">
<img src="../../assets/用户.jpg" width="80%" height="80%"></div>
<div style="position: absolute;right: 0;top:0;width: 236px;height:130px;">
<el-button style="margin-top: 60px;width: 68px;height: 20px;text-align: left;line-height: 3px" type="danger" >作者</el-button>
<br>
<el-button style="width: 68px;height: 20px;line-height: 3px"type="info">类型</el-button>
<div style="width:100px;height: 28px;background-color: darkgrey;line-height: 25px"><h5 >观看次数 评论数</h5>
</div>
</div>
</div>
<div style="width: 450px;height: 140px;border: 1px solid darkgrey;position: relative; left: 600px;top: -142px">
<p style="position: absolute;top: 20px;right: 80px">视频描述</p>
<div style="width: 230px;height: 140px;border: 1px solid darkgrey;background-color: darkgrey;border-radius: 15px;position: absolute;right: 235px;top: 0;">
<img src="../../assets/用户.jpg" width="80%" height="80%"></div>
<div style="position: absolute;right: 0;top:0;width: 236px;height:130px;">
<el-button style="margin-top: 60px;width: 68px;height: 20px;text-align: left;line-height: 3px" type="danger" >作者</el-button>
<br>
<el-button style="width: 68px;height: 20px;line-height: 3px"type="info">类型</el-button>
<div style="width:100px;height: 28px;background-color: darkgrey;line-height: 25px"><h5 >观看次数 评论数</h5>
</div>
</div>
</div>
<div style="width: 450px;height: 140px;border: 1px solid darkgrey;position: relative;margin-left: 40px;margin-top: 40px;top:-140px;left: 10px">
<p style="position: absolute;top: 20px;right: 80px">视频描述</p>
<div style="width: 230px;height: 140px;border: 1px solid darkgrey;background-color: darkgrey;border-radius: 15px;position: absolute;right: 235px;top: 0;">
<img src="../../assets/用户.jpg" width="80%" height="80%"></div>
<div style="position: absolute;right: 0;top:0;width: 236px;height:130px;">
<el-button style="margin-top: 60px;width: 68px;height: 20px;text-align: left;line-height: 3px" type="danger" >作者</el-button>
<br>
<el-button style="width: 68px;height: 20px;line-height: 3px"type="info">类型</el-button>
<div style="width:100px;height: 28px;background-color: darkgrey;line-height: 25px"><h5 >观看次数 评论数</h5>
</div>
</div>
</div>
<div style="width: 450px;height: 140px;border: 1px solid darkgrey;position: relative;margin-left: 40px;margin-top: 40px;left: 560px;top: -320px">
<p style="position: absolute;top: 20px;right: 80px">视频描述</p>
<div style="width: 230px;height: 140px;border: 1px solid darkgrey;background-color: darkgrey;border-radius: 15px;position: absolute;right: 235px;top: 0;">
<img src="../../assets/用户.jpg" width="80%" height="80%"></div>
<div style="position: absolute;right: 0;top:0;width: 236px;height:130px;">
<el-button style="margin-top: 60px;width: 68px;height: 20px;text-align: left;line-height: 3px" type="danger" >作者</el-button>
<br>
<el-button style="width: 68px;height: 20px;line-height: 3px"type="info">类型</el-button>
<div style="width:100px;height: 28px;background-color: darkgrey;line-height: 25px"><h5 >观看次数 评论数</h5>
</div>
</div>
</div>
<div style="width: 450px;height: 140px;border: 1px solid darkgrey;position: relative;margin-left: 40px;margin-top: 40px;top:-320px;right: -9px">
<p style="position: absolute;top: 20px;right: 80px">视频描述</p>
<div style="width: 230px;height: 140px;border: 1px solid darkgrey;background-color: darkgrey;border-radius: 15px;position: absolute;right: 235px;top: 0;">
<img src="../../assets/用户.jpg" width="80%" height="80%"></div>
<div style="position: absolute;right: 0;top:0;width: 236px;height:130px;">
<el-button style="margin-top: 60px;width: 68px;height: 20px;text-align: left;line-height: 3px" type="danger" >作者</el-button>
<br>
<el-button style="width: 68px;height: 20px;line-height: 3px"type="info">类型</el-button>
<div style="width:100px;height: 28px;background-color: darkgrey;line-height: 25px"><h5 >观看次数 评论数</h5>
</div>
</div>
</div>
<div style="width: 450px;height: 140px;border: 1px solid darkgrey;position: relative;margin-left: 40px;margin-top: 40px;left: 560px;top: -500px">
<p style="position: absolute;top: 20px;right: 80px">视频描述</p>
<div style="width: 230px;height: 140px;border: 1px solid darkgrey;background-color: darkgrey;border-radius: 15px;position: absolute;right: 235px;top: 0;">
<img src="../../assets/用户.jpg" width="80%" height="80%"></div>
<div style="position: absolute;right: 0;top:0;width: 236px;height:130px;">
<el-button style="margin-top: 60px;width: 68px;height: 20px;text-align: left;line-height: 3px" type="danger" >作者</el-button>
<br>
<el-button style="width: 68px;height: 20px;line-height: 3px"type="info">类型</el-button>
<div style="width:100px;height: 28px;background-color: darkgrey;line-height: 25px"><h5 >观看次数 评论数</h5>
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "dynamic",
components: {Sidebar, Handder},
data() {
return {}
},
methods: {},
created() {
}
}
</script>
<style scoped>
@media screen and (min-width: 1970px) {
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px) {
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/fans.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--粉丝-->
<template>
<div>粉丝</div>
</template>
<script>
export default {
name: "fans",
data() {
return {}
},
methods: {},
created() {
}
}
</script>
<style scoped>
@media screen and (min-width: 1970px){
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px){
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/follow.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--个人中心-->
<template>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
<div style="display: flex;
justify-content: center; width: calc(100vw - 500px);
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div style="width: 1400px;height: 1000px;position: absolute;">
<h1 style="font-size: 45px;text-align: center;margin-top: 30px;margin-bottom: 30px">XXX的个人中心</h1>
<div style="width: 1300px;height: 120px;margin-left: 50px;margin-bottom: 50px;position: relative">
<el-card>
<el-avatar style="margin-bottom: 15px;float:left;width: 100px;height: 100px;" :src="avatarUrl"
alt="头像" :round="true"></el-avatar>
<ul style="float: left;margin-top: 30px;margin-left: 30px;list-style-type: none">
<li>昵称:</li>
<li>生日:</li>
<li>会员等级:</li>
</ul>
<div style="width: 300px;float: right;padding-top: 20px">
<div style="margin-left: 130px;height: 36px">
</div>
<el-descriptions style="margin-left: 10px;" class="margin-top" :column="4" direction="vertical"
:colon="false">
<el-descriptions-item label="关注数">1</el-descriptions-item>
<el-descriptions-item label="粉丝数">1</el-descriptions-item>
<el-descriptions-item label="获赞数">1</el-descriptions-item>
<el-descriptions-item label="播放数">1</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
</div>
</div>
<div>
<el-card style="margin-top:300px;margin-left: 5px;">
<div class="text_item">
佩奇
</div>
</el-card>
<el-card class="box_card">
<div class="text_item">
佩奇
</div>
</el-card>
<el-card class="box_card">
<div class="text_item">
佩奇
</div>
</el-card>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "personalCenter",
components: {Sidebar, Handder},
data() {
return {
size: "200",
avatarUrl: require('@/assets/a.jpg')
}
},
methods: {},
created() {
}
}
</script>
<style scoped>
h2 {
font-weight: normal;
}
i {
display: inline-block;
margin-left: 20px;
}
.text_item {
font-size: 14px;
padding: 18px 0;
}
.box_card {
width: 1300px;
margin-left: 5px;
}
@media screen and (min-width: 1970px){
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px) {
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/history.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--历史记录-->
<template>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
<div style="
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div style="width: 1400px;height: 1000px;position: absolute;">
<span>历史记录</span>
<span class="button-container"> <el-button>搜索历史记录</el-button></span>
<span class="button-container"> <el-button>清空历史记录</el-button></span>
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
<div style="width: 1400px;height: 1000px;position: absolute;">
<br>
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="400px" height="300px" > </div>
<div style="float:right">
<div class="box" style="width:800px;height:80px;justify-content: center;">标题</div>
<div class="box" style="width:800px;height:80px;margin:30px 0 ">
<span style="margin-left: 40px"> <el-avatar style="width:80px;height: 80px"><img src="../../../public/史迪仔.jpg"></el-avatar></span>
<span > 作者昵称</span>
<span style="display: flex; justify-content: flex-end;margin-left: auto;">清除记录</span>
</div>
<div class="box" style="width:800px;height:80px;">
<span style="margin-left: 120px">观看时间</span>
<span style="display: flex; justify-content: flex-end;margin-left: auto;">时间戳</span>
</div>
</div>
</div>
<br>
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="400px" height="300px" > </div>
<div style="float:right">
<div class="box" style="width:800px;height:80px;justify-content: center;">标题</div>
<div class="box" style="width:800px;height:80px;margin:30px 0 ">
<span style="margin-left: 40px"> <el-avatar style="width:80px;height: 80px"><img src="../../../public/史迪仔.jpg"></el-avatar></span>
<span > 作者昵称</span>
<span style="display: flex; justify-content: flex-end;margin-left: auto;">清除记录</span>
</div>
<div class="box" style="width:800px;height:80px;">
<span style="margin-left: 120px">观看时间</span>
<span style="display: flex; justify-content: flex-end;margin-left: auto;">时间戳</span>
</div>
</div>
</div>
<br>
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="400px" height="300px" > </div>
<div style="float:right">
<div class="box" style="width:800px;height:80px;justify-content: center;">标题</div>
<div class="box" style="width:800px;height:80px;margin:30px 0 ">
<span style="margin-left: 40px"> <el-avatar style="width:80px;height: 80px"><img src="../../../public/史迪仔.jpg"></el-avatar></span>
<span > 作者昵称</span>
<span style="display: flex; justify-content: flex-end;margin-left: auto;">清除记录</span>
</div>
<div class="box" style="width:800px;height:80px;">
<span style="margin-left: 120px">观看时间</span>
<span style="display: flex; justify-content: flex-end;margin-left: auto;">时间戳</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "history",
components: {Sidebar, Handder},
data() {
return {
size:"200",
avatarUrl:""
}
},
methods: {},
created() {
}
}
</script>
<style scoped>
.button-container {
display: flex;
justify-content: flex-end;
float:right;
}
.box {
display: flex;
align-items: center;
}
@media screen and (min-width: 1970px){
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px){
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
.idxs{
margin-left: 250px;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/notify.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--通知-->
<template>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
<div style="
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div style="width: 1400px;height: 1000px;position: absolute;">
<div><el-page-header @back="goBack" content="返回"></el-page-header></div>
<br>
<!--卡片 -->
<el-card>
<!--让编辑按钮处于一行的右侧-->
<div style="display: flex; justify-content: space-between;">
<span>全部消息</span>
<el-button type="primary">编辑</el-button>
</div>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
</el-card>
<div style="width: 1400px;height: 1000px;position: absolute;">
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "notify",
components: {Sidebar, Handder},
data() {
return {
size:"200",
avatarUrl:""
}
},
methods: {},
created() {
}
}
</script>
<style scoped>
@media screen and (min-width: 1970px){
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px){
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
.idxs{
margin-left: 250px;
}
}
.button-container {
display: flex;
justify-content: flex-end;
float:right;
}
.box {
display: flex;
align-items: center;
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/otherSpace.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--他人中心-->
<template>
<div>
<Handder></Handder>
<sidebar></sidebar>
<div class="idxs">
<div >
<h1 >XXX的个人中心</h1>
<div >
<el-card>
<el-avatar style="margin-bottom: 15px;float:left;width: 100px;height: 100px;" :src="avatarUrl"
alt="头像" :round="true"></el-avatar>
<ul style="float: left;margin-top: 30px;margin-left: 30px;list-style-type: none">
<li>昵称:</li>
<li>生日:</li>
<li>会员等级:</li>
</ul>
<div style="width: 300px;float: right;padding-top: 20px">
<div style="margin-left: 130px">
<span><el-button plain style="padding: 10px">
<i style="margin-left: 0" class="el-icon-edit"></i>关注他</el-button></span>
<span><el-button plain style="padding: 10px">
<i style="margin-left: 0" class="el-icon-edit"></i>动态</el-button></span>
</div>
<el-descriptions style="margin-left: 10px;" class="margin-top" :column="4" direction="vertical"
:colon="false">
<el-descriptions-item label="关注数">1</el-descriptions-item>
<el-descriptions-item label="粉丝数">1</el-descriptions-item>
<el-descriptions-item label="获赞数">1</el-descriptions-item>
<el-descriptions-item label="播放数">1</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
</div>
<div style="width: 1300px;margin-top: 30px;margin-left: 50px;height: 900px;">
<el-card>
<h2>XXX的视频</h2>
<el-divider></el-divider>
<div>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"></span>
<span><img src="../../assets/1.png"
style="width: 300px;height: 200px;margin-left: 100px"></span>
<span><img src="../../assets/1.png"
style="width: 300px;height: 200px;margin-left: 100px"></span><br>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
</div>
<div>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"></span>
<span><img src="../../assets/1.png"
style="width: 300px;height: 200px;margin-left: 100px"></span>
<span><img src="../../assets/1.png"
style="width: 300px;height: 200px;margin-left: 100px"></span><br>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
</div>
<div>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"></span>
<span><img src="../../assets/1.png"
style="width: 300px;height: 200px;margin-left: 100px"></span>
<span><img src="../../assets/1.png"
style="width: 300px;height: 200px;margin-left: 100px"></span><br>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<div style="margin-top: 15px;text-align: center">
<el-button plain>查看更多</el-button>
</div>
</div>
<el-divider></el-divider>
</el-card>
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "personalCenter",
components: {Sidebar, Handder},
data() {
return {
size: "200",
avatarUrl: "../../assets/1.png"
}
},
methods: {},
created() {
}
}
</script>
<style scoped>
@media screen and (min-width: 1970px) {
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px) {
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
}
h2 {
font-weight: normal;
}
i {
display: inline-block;
margin-left: 20px;
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/personalCenter.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--个人中心-->
<template>
<div>
<Handder></Handder>
<sidebar></sidebar>
<div style="display: flex;
justify-content: center;
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div class="idxs">
<h1 style="font-size: 45px;text-align: center;margin-top: 30px;margin-bottom: 30px">XXX的个人中心</h1>
<div style="width: 1300px;height: 120px;margin-left: 50px;margin-bottom: 50px">
<el-card>
<el-avatar style="margin-bottom: 15px;float:left;width: 100px;height: 100px;" :src="avatarUrl" alt="头像" :round="true"></el-avatar>
<ul style="float: left;margin-top: 30px;margin-left: 30px;list-style-type: none">
<li>昵称:</li>
<li>生日:</li>
<li>会员等级:</li>
</ul>
<div style="width: 300px;float: right;padding-top: 20px">
<div style="margin-left: 130px;height: 36px">
</div>
<el-descriptions style="margin-left: 10px;" class="margin-top" :column="4" direction="vertical" :colon="false">
<el-descriptions-item label="关注数">1</el-descriptions-item>
<el-descriptions-item label="粉丝数">1</el-descriptions-item>
<el-descriptions-item label="获赞数">1</el-descriptions-item>
<el-descriptions-item label="播放数">1</el-descriptions-item>
</el-descriptions></div>
</el-card>
</div>
<div style="width: 1300px;margin-top: 30px;margin-left: 50px;height: 1000px;">
<el-card>
<h2>我的视频</h2><el-divider></el-divider>
<div>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"></span>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"></span>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"></span><br>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<div style="margin-top: 15px;text-align: center"><el-button plain>查看更多</el-button></div>
</div>
<el-divider></el-divider>
<h2>我的收藏</h2><el-divider></el-divider>
<div>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"> </span>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"> </span>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"> </span><br>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<div style="margin-top: 15px;text-align: center"><el-button plain>查看更多</el-button></div>
</div>
<el-divider></el-divider>
<h2>我的历史</h2><el-divider></el-divider>
<div>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"> </span>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"> </span>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"> </span><br>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<div style="margin-top: 15px;text-align: center"><el-button plain>查看更多</el-button></div>
</div>
<el-divider></el-divider>
</el-card>
</div>
</div>
</div>
</div>
</template>
<script>
import Sidebar from "@/components/sidebar.vue";
import Handder from "@/components/Handder.vue";
export default {
name: "personalCenter",
components: {Handder, Sidebar},
data() {
return {
size:"200",
avatarUrl:""
}
},
methods: {},
created() {
}
}
</script>
<style scoped>
@media screen and (min-width: 1970px){
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px){
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
}
h2{
font-weight: normal;
}
i{
display: inline-block;
margin-left: 20px;
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/report.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--举报-->
<template>
<div class="idxs">
<Handder></Handder>
<sidebar></sidebar>
<div style="display: flex;
justify-content: center;align-items: center; width: calc(100vw - 500px);
height:700px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div style="width: 1000px;height: 600px;margin-top: 20px;position: absolute">
<h1 style="margin-bottom: 50px;text-align: center;color: #303133;font-family: 'Microsoft YaHei', sans-serif;">违规举报</h1>
<el-form size="medium" label-position="left" ref="form" :model="form" label-width="80px">
<el-form-item label="违规描述">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="违规性质">
<el-select v-model="form.region" placeholder="请选择违规性质" @change="change">
<el-option label="仇恨言论" value="1"></el-option>
<el-option label="暴力黄色" value="2"></el-option>
<el-option label="赌博/毒品" value="3"></el-option>
<el-option label="其它" value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="flag==1" label="违规类型">
<el-checkbox-group v-model="form.type">
<el-checkbox label="违规类型1" name="type"></el-checkbox>
<el-checkbox label="违规类型2" name="type"></el-checkbox>
<el-checkbox label="违规类型3" name="type"></el-checkbox>
<el-checkbox label="违规类型4" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-else-if="flag==2" label="违规性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="违规类型5" name="type"></el-checkbox>
<el-checkbox label="违规类型6" name="type"></el-checkbox>
<el-checkbox label="违规类型7" name="type"></el-checkbox>
<el-checkbox label="违规类型8" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-else-if="flag==3" label="违规性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="违规类型9" name="type"></el-checkbox>
<el-checkbox label="违规类型10" name="type"></el-checkbox>
<el-checkbox label="违规类型11" name="type"></el-checkbox>
<el-checkbox label="违规类型12" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-else-if="flag==4" label="违规性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="违规类型13" name="type"></el-checkbox>
<el-checkbox label="违规类型14" name="type"></el-checkbox>
<el-checkbox label="违规类型15" name="type"></el-checkbox>
<el-checkbox label="违规类型16" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="违规内容">
<el-radio-group v-model="form.resource">
<el-radio label="视频资源"></el-radio>
<el-radio label="言论"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="留言 ">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交举报</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import Sidebar from "@/components/sidebar.vue";
import Handder from "@/components/Handder.vue";
export default {
name: "report",
components: {Handder, Sidebar},
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
}, flag: "1"
}
},
methods: {
onSubmit() {
console.log('submit!');
},
change(key) {
this.flag = key
}
},
created() {
}
}
</script>
<style scoped>
@media screen and (min-width: 1970px){
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px){
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
}
.el-form-item {
margin-bottom: 50px;
}
</style>
\ No newline at end of file
YouBili_front/src/views/show/IndexView.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--主页-->
<template>
<div id="idx">
<Handder></Handder>
<sidebarVue></sidebarVue>
<div class="idxs">
<div>
<el-row :gutter="20">
<el-col :span="12">
<div>
<el-carousel height="420px" trigger="click">
<el-carousel-item v-for="(item,idx) in lbList" :key="idx">
<h3 class="small">
<img :src="item.src" alt="" height="420px" width="100%">
</h3>
</el-carousel-item>
</el-carousel>
</div>
</el-col>
<el-col :span="12">
<el-row :gutter="20">
<el-col v-for="(v,i) of lbList2" :key="i" :span="12">
<router-link to="/videoIndex">
<div class="sp_box">
<img :src="v.src" alt="" width="100%">
<h4>{{ v.title }}</h4>
<p>{{ v.name }}</p>
</div>
</router-link>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
<div>
<el-row :gutter="20">
<router-link to="/videoIndex">
<el-col v-for="(v,i) of sum" :key="i" :span="8">
<div class="sp_box" style="height: 300px;">
视频页面
</div>
</el-col>
</router-link>
</el-row>
</div>
<el-backtop :bottom="50" :right="8" :visibility-height="100"></el-backtop>
</div>
</div>
</template>
<!--
1. 将两个组件引入进来,头部导航栏 Handder , sidebar . 在大的<div></div>里面添加<Handder></Handder> <sidebarVue></sidebarVue>,
2. 在自己的<div></div> 需要引入class="idxs"
3. 在Style里面添加"idxs"样式
-->
<script>
import Handder from "@/components/Handder";
import sidebarVue from "@/components/sidebar";
export default {
name: "index",
components:{
Handder,
sidebarVue
},
data() {
return {
sum: 10,
lbList: [
{src: "https://uploadstatic.mihoyo.com/contentweb/20200509/2020050914430985995.jpg"},
{src: "https://uploadstatic.mihoyo.com/contentweb/20200120/2020012017544296758.jpg"},
{src: "https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415075614503.png"},
{src: "https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415062311645.png"}
],
lbList2: [
{
src: "https://uploadstatic.mihoyo.com/contentweb/20200509/2020050914430985995.jpg",
title: "战锤3全战：超凡 传奇-巴托-里昂尼斯战团-40T全天灾#1",
name: "擎天柱"
},
{
src: "https://uploadstatic.mihoyo.com/contentweb/20200120/2020012017544296758.jpg",
title: "汽车人",
name: "擎天柱"
},
{
src: "https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415075614503.png",
title: "汽车人",
name: "擎天柱"
},
{
src: "https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415062311645.png",
title: "汽车人",
name: "擎天柱"
}
]
}
},
methods: {},
created() {
}
}
</script>
<style>
* {
padding: 0;
margin: 0;
border: 0;
}
#idx {
margin: 0 auto;
}
@media screen and (min-width: 1970px){
.idxs {
margin: 0 auto;
width: calc(100% - 290px);
max-width: 1970px;
min-width: 1500px;
}
}
@media screen and (max-width: 1969px){
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
margin-top: 60px;
margin-left: 270px;
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1970px;
min-width: 1500px;
}
}
.lunbo {
width: 500px;
}
#el_box {
margin-bottom: 20px;
}
.sp_box {
height: 200px;
border-radius: 5px;
background: greenyellow;
margin-bottom: 20px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.sp_box img {
border-radius: 5px;
}
.sp_box p {
font-size: 13px;
color: #555;
font-weight: bold;
}
.el-carousel {
border-radius: 5px;
}
/* 轮播图的样式 可以注释 */
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
\ No newline at end of file
YouBili_front/src/views/show/Search.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--搜索页-->
<template>
<div class="idxs">
<Handder></Handder>
<sidebar></sidebar>
搜索页</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "Search",
components: {Sidebar, Handder},
data() {
return {}
},
methods: {},
created() {
}
}
</script>
<style scoped>
@media screen and (min-width: 1970px){
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px){
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/show/classification.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--分类-->
<template>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "classification",
components: {Sidebar, Handder},
data() {
return {}
},
methods: {},
created() {
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
YouBili_front/src/views/show/showHot.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--热门-->
<template>
<div class="idxs">
<Handder></Handder>
<sidebar></sidebar>
<div style="
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden" class="idxs">
<div style="width: 1400px;height: 1000px;position: absolute;">
<!--标签页-->
<el-tabs v-model="activeName" @tab-click="handleClick" tab-size="small">
<el-tab-pane label="热门排行" name="first" class="tab-label"></el-tab-pane>
<el-tab-pane label="最新排行" name="second" class="tab-label"></el-tab-pane>
<el-tab-pane label="感兴趣的" name="third" class="tab-label"></el-tab-pane>
</el-tabs>
<div style="width: 1400px;height: 1000px;position: absolute;">
<br>
<el-row>
<el-col :span="12">
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="300px" height="300px" > </div>
<div style="float:left">
<div class="box" style="width:350px;height:70px;justify-content: center;">视频描述</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">作者</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">类型</div>
<!--使用Icon图标组件-->
<div class="box" style="width:400px;height:70px;">
<span style="margin-left: 40px"><i class="el-icon-view">观看次数</i></span>
<span style="display: flex; justify-content: flex-end;margin-left: 140px;"><i class="el-icon-chat-dot-square">评论数</i></span>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="300px" height="300px" > </div>
<div style="float:left">
<div class="box" style="width:350px;height:70px;justify-content: center;">视频描述</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">作者</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">类型</div>
<div class="box" style="width:400px;height:70px;">
<span style="margin-left: 40px"><i class="el-icon-view">观看次数</i></span>
<span style="display: flex; justify-content: flex-end;margin-left: 140px;"><i class="el-icon-chat-dot-square">评论数</i></span>
</div>
</div>
</div>
</el-col>
</el-row>
<br>
<el-row>
<el-col :span="12">
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="300px" height="300px" > </div>
<div style="float:left">
<div class="box" style="width:350px;height:70px;justify-content: center;">视频描述</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">作者</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">类型</div>
<div class="box" style="width:400px;height:70px;">
<span style="margin-left: 40px"><i class="el-icon-view">观看次数</i></span>
<span style="display: flex; justify-content: flex-end;margin-left: 140px;"><i class="el-icon-chat-dot-square">评论数</i></span>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="300px" height="300px" > </div>
<div style="float:left">
<div class="box" style="width:350px;height:70px;justify-content: center;">视频描述</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">作者</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">类型</div>
<div class="box" style="width:400px;height:70px;">
<span style="margin-left: 40px"><i class="el-icon-view">观看次数</i></span>
<span style="display: flex; justify-content: flex-end;margin-left: 140px;"><i class="el-icon-chat-dot-square">评论数</i></span>
</div>
</div>
</div>
</el-col>
</el-row>
<br>
<el-row>
<el-col :span="12">
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="300px" height="300px" > </div>
<div style="float:left">
<div class="box" style="width:350px;height:70px;justify-content: center;">视频描述</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">作者</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">类型</div>
<div class="box" style="width:400px;height:70px;">
<span style="margin-left: 40px"><i class="el-icon-view">观看次数</i></span>
<span style="display: flex; justify-content: flex-end;margin-left: 140px;"><i class="el-icon-chat-dot-square">评论数</i></span>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="300px" height="300px" > </div>
<div style="float:left">
<div class="box" style="width:350px;height:70px;justify-content: center;">视频描述</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">作者</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">类型</div>
<div class="box" style="width:400px;height:70px;">
<span style="margin-left: 40px"><i class="el-icon-view">观看次数</i></span>
<span style="display: flex; justify-content: flex-end;margin-left: 140px;"><i class="el-icon-chat-dot-square">评论数</i></span>
</div>
</div>
</div>
</el-col>
</el-row>
<br>
<!--分割线-->
<el-divider content-position="right"></el-divider>
<div align="center">
<!--分页 当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页。-->
<el-pagination
:hide-on-single-page="value"
:total="5"
layout="prev, pager, next">
</el-pagination>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "showHot",
components: {Sidebar, Handder},
data() {
return {
size:"200",
avatarUrl:""
}
},
methods: {},
created() {
}
}
</script>
<style scoped>
.tab-label {
font-size: 300px; /* 调整文字大小为16px，可根据需要进行修改 */
}
.box {
display: flex;
align-items: center;/* 调整文字位置,让其垂直居中 */
}
@media screen and (min-width: 1970px){
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px){
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
.idxs{
margin-left: 250px;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/user/login.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--登录-->
<template>
<div>
<el-row>
<el-input placeholder="请输入用户名" v-model="user.username"></el-input>
</el-row>
<el-row>
<el-input type="password" placeholder="请输入用密码" v-model="user.password"></el-input>
</el-row>
<el-row>
<el-button type="primary" @click="login()">登录</el-button>
</el-row>
<el-button
plain
@click="open1">
成功
</el-button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "login",
data() {
return {
user: {
username: "",
password: ""
}
}
},
methods: {
login() {
axios.post("/api/auth/login", this.user).then(function (response) {
alert(response.data.code)
console.log(this.user)
console.log(11111)
if (response.data.code == 1001) {
location.href = "/"
this.open1();
} else {
// this.open2();
}
})
},
open1() {
this.$notify({
title: '成功',
message: '这是一条成功的提示消息',
type: 'success'
});
},
open2() {
this.$notify({
title: '警告',
message: '这是一条警告的提示消息',
type: 'warning'
});
},
created() {
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
YouBili_front/src/views/user/reg.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<!--注册-->
<template>
<div>注册</div>
</template>
<script>
export default {
name: "reg",
data() {
return {}
},
methods: {},
created() {
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
YouBili_front/src/views/video/videoIndex.vue 已删除 100644 → 0
浏览文件 @ cb2e8e44
<template xmlns:align-items="http://www.w3.org/1999/xhtml">
<div>
<el-drawer
:visible.sync="drawer"
:with-header="false"
direction="ltr"
size="250px"
title="我是标题">
<Sidebar></Sidebar>
</el-drawer>
<Handder></Handder>
<button class="btn" @click="drawer=true">
<i class="el-icon-caret-right"></i>
</button>
<div class="idxs">
<div style="margin-top: 10px">
<el-row :gutter="10">
<el-col :span="16">
<div>
<h1 class="title">这是标题!!!</h1>
</div>
<div>
<span><i class="el-icon-video-play"></i>播放总数</span>
<span style="margin-left: 20px"><i class="el-icon-date"></i>弹幕数量</span>
<span style="margin-left: 20px"><i class="el-icon-timer"></i>2023-6-10</span>
</div>
</el-col>
<el-col :span="8">
<div style="margin-left: 120px">
<el-card styly="width: 250px;height: 20px">
<el-row>
<el-col :span="8">
<el-popover
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<el-button slot="reference"> <el-avatar icon="el-icon-user-solid" style="width: 40px;height: 40px"></el-avatar></el-button>
</el-popover>
</el-col>
<el-col :span="16">
<div>作者名字</div>
<div style="margin-top: 10px"> <el-button type="primary" round>关注</el-button></div>
</el-col>
</el-row>
</el-card>
</div>
</el-col>
</el-row>
</div>
<div>
<el-row :gutter="0">
<el-col :span="18">
<div>
<div id="dplayer" style="height: 585px;width: 1040px"></div>
</div>
</el-col>
<el-col :span="6">
<div>
<el-card style="width: 300px">
</el-card>
</div>
</el-col>
</el-row>
</div>
<el-card>
<div style="height: 50px">
<p>视频简介</p>
</div>
</el-card>
<div style="margin-top: 20px">
<hr>
<el-row :gutter="10">
<el-col :span="2">
<div>
<a-icon type="dingding" />
<a-icon type="like" theme="twoTone" />
<span><a-icon type="dislike" theme="twoTone" /></span>
</div>
</el-col>
<el-col :span="2">
<div>
<el-button circle class="button" icon="el-icon-edit" type="primary"><span>132</span>
</el-button>
</div>
</el-col>
<el-col :span="2">
<div>
<el-button circle class="button" icon="el-icon-edit" type="primary"><span>12</span>
</el-button>
</div>
</el-col>
<el-col :span="2">
<div>
<el-button circle class="button" icon="el-icon-edit" type="primary"><span>322</span>
</el-button>
</div>
</el-col>
<el-col :span="18">
<div></div>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
import DPlayer from 'dplayer';
export default {
name: "videoIndex",
components: {Handder, Sidebar},
data() {
return {
dp: "",
drawer: false
};
},
created() {
},
mounted() {
this.dp = new DPlayer({
//播放器的一些参数
container: document.getElementById('dplayer'),
video: {
quality: [ // 指定视频清晰度选项
{
name: '超清', // 清晰度名称
url: 'http://youbili-test.oss-cn-beijing.aliyuncs.com/TestVideo-1080P.mp4', // 视频源地址
type: 'mp4' // 视频类型
},
{
name: '高清',
url: 'http://youbili-test.oss-cn-beijing.aliyuncs.com/2023-05-20%2018-05-48.mp4',
type: 'mp4'
},
{
name: '标清',
url: 'http://youbili-test.oss-cn-beijing.aliyuncs.com/TestVideo-360P.mp4',
type: 'mp4'
}
],
defaultQuality: 0, // 指定默认清晰度索引，从0开始
},
danmaku: { // 指定弹幕功能选项
id: 'demo', // 弹幕id，用于区分不同视频的弹幕
api: 'https://api.prprpr.me/dplayer/', // 弹幕源地址
user: 'Bing', // 弹幕发送者名称
bottom: '15%', // 弹幕距离底部的距离
unlimited: true, // 是否允许无限滚动弹幕
},
autoplay: false, //是否自动播放
theme: '#FADFA3', //主题色
loop: false, //视频是否循环播放
lang: 'zh-cn',
screenshot: false, //是否开启截图
hotkey: true, //是否开启热键
preload: 'auto', //视频是否预加载
volume: 0.7, //默认音量
mutex: true, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
});
},
methods: {}
};
</script>
<style scoped>
@media screen and (min-width: 1970px) {
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
@media screen and (max-width: 1969px) {
.idxs {
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
margin: 60px auto;
}
}
.btn {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 80px;
width: 40px;
text-align: center;
line-height: 80px;
cursor: pointer;
background-color: skyblue;
color: #fff;
font-size: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.btn:hover {
background-color: steelblue;
}
.button {
margin-top: 10px;
margin-left: 5px;
}
.title {
font-family: "Microsoft YaHei", Arial, sans-serif;
font-size: 36px;
font-weight: bold;
}
</style>
YouBili_front/vue.config.js 已删除 100644 → 0
浏览文件 @ cb2e8e44
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或