Skip to content

Y
YoubiliProject

代码敲不队 / YoubiliProject

通知 7
Star 1
Fork 0
Y
YoubiliProject

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

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

设计部分

上级 d15862e7
隐藏空白更改
内联 并排
Showing with 668 addition and 477 deletion
YouBili_front/src/views/pay/commodity.vue
浏览文件 @ 52c5c373
<!--购买界面-->
<template>
<div>
<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 id="">
<div class="idxs">
<el-card class="box-card">
<div class="text_item">
<h2 style="color:palevioletred;text-align: center">月度会员服务</h2>
<img src="../../../public/logo1.png" style="width: 70px;margin-left: 112px;margin-top: 50px">
<div class="rules_d">
<p class="el-icon-success">可看电影:15个</p>
<p class="el-icon-success">套餐时长:30天</p>
<p class="el-icon-success">电影画质:960p</p>
<p class="el-icon-success">基础会员弹幕字体颜色</p>
<p class="el-icon-error">无专属客服</p>
<p class="el-icon-error">不支持多种设备</p>
<p class="el-icon-error">不能观看美剧电影</p>
<p class="el-icon-error">仅限个人账户使用,不支持他人登录</p>
</div>
</el-card>
</div>
<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">
<h2 style="color:palevioletred;text-align: center">季度会员服务</h2>
<img src="../../../public/logo1.png" style="width: 70px;margin-left: 112px;margin-top: 50px">
<div class="rules_d">
<p class="el-icon-success">可看电影:50个</p>
<p class="el-icon-success">套餐时长:90天</p>
<p class="el-icon-success">电影画质:1080p</p>
<p class="el-icon-success">中级会员弹幕字体颜色</p>
<p class="el-icon-success">有季度会员专属客服</p>
<p class="el-icon-success">支持手机,平板设备</p>
<p class="el-icon-success">可以观看10部美剧电影</p>
<p class="el-icon-error">仅限个人账户使用,不支持他人登录</p>
</div>
<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">
<h2 style="color:palevioletred;text-align: center">年度会员服务</h2>
<img src="../../../public/logo1.png" style="width: 70px;margin-left: 112px;margin-top: 50px">
<div class="rules_d">
<p class="el-icon-success">可看电影:无限看</p>
<p class="el-icon-success">套餐时长:365天</p>
<p class="el-icon-success">电影画质:蓝光</p>
<p class="el-icon-success">高级会员弹幕字体颜色</p>
<p class="el-icon-success">年度会员专属客服</p>
<p class="el-icon-success">支持多种设备</p>
<p class="el-icon-success">无限观看美剧电影</p>
<p class="el-icon-success">不限用户使用,支持他人登录</p>
</div>
<router-link to="/pay">
<el-button class="pay_button" type="primary">立即购买</el-button>
</router-link>
</div>
</el-card>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder";
import Sidebar from "@/components/sidebar";
export default {
name: "commodity",
components: {Handder, Sidebar},
data() {
return {
radio1: '月度',
items: [
{type: '', label: '月度会员'}]
}
},
methods: {
},
methods: {},
created() {
}
......@@ -63,56 +95,73 @@ export default {
</script>
<style scoped>
#change_group{
display: flex;
justify-content: center;
align-items: center;
}
.text {
.text_item {
font-size: 14px;
padding: 10px 0;
}
.item {
padding: 10px 0;
@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;
}
}
.box-card {
position: relative;
width: 350px;
height: 700px;
margin-top: 30px;
margin-left:100px;
margin-top: 95px;
margin-left: 130px;
float: left;
}
.pay_button{
.pay_button {
position: absolute;
bottom: 30px;
bottom: 45px;
/* 宽度与卡片内容一致 */
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;*/
/* }*/
/*}*/
.el-icon-success {
color: cornflowerblue;
display: flex;
line-height: 2;
margin-top: 10px;
}
.rules_d {
margin-top: 85px;
}
.el-icon-error {
color: orangered;
display: flex;
line-height: 2;
margin-top: 10px;
}
</style>
\ No newline at end of file
YouBili_front/src/views/pay/pay.vue
浏览文件 @ 52c5c373
<!--支付界面-->
<template>
<div>
<div style="justify-content: center;align-items: center; width: calc(100vw - 500px);
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div class="idxs" >
<div class="wai_d">
<div class="nei_d">
<div class="h">
......@@ -66,21 +65,24 @@ height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视
<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>
<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>
</div>
</template>
<script>
import Handder from "@/components/Handder";
import Sidebar from "@/components/sidebar";
export default {
name: "pay",
components: {Handder, Sidebar},
data() {
return {
options: [{
......@@ -113,8 +115,33 @@ export default {
width: 100%;
margin-top: 2%;
margin-left: 2%;
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;
}
.idxs{
margin-left: 250px;
}
}
.head_div {
background-color: white;
border: 1px solid #ccc;
......@@ -174,27 +201,5 @@ export default {
.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/fans.vue
浏览文件 @ 52c5c373
<!--粉丝-->
<!--个人中心-->
<template>
<div>粉丝</div>
<div class="idxs">
<!-- 设置关注和粉丝之间的跳转-->
<el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect" active-text-color="orange" router>
<el-menu-item index="/fans">粉丝</el-menu-item>
<el-menu-item index="/follow">关注</el-menu-item>
</el-menu>
<el-empty description="没有关注" v-if="abc"></el-empty>
<div v-for="v of number">
<el-card style="height: 120px;width: 800px;margin-left: 200px;margin-top: 30px;">
<el-col >
<el-row :span="8" style="margin-top: 10px">
<div>
<el-popover
placement="bottom"
width="200"
trigger="hover"
>
<el-row :gutter="10">
<el-col :span="12">
<span><i class="el-icon-user"></i><span>粉丝数:</span></span>
<span>{{ v.fans }}</span>
</el-col>
<el-col :span="12">
<span><i class="el-icon-user"></i><span>关注数:</span></span>
<span>{{ v.follow }}</span>
</el-col>
</el-row>
<el-avatar slot="reference" style="cursor: pointer" shape="square" :size="60" :src="squareUrl"></el-avatar>
</el-popover>
</div>
</el-row>
<el-row :span="8" style="margin-top: -45px;margin-left: 50px" >
<div style="margin-left: 50px;margin-top: 0px"><h3>{{ v.name }}</h3></div>
</el-row>
<el-row :span="8" style="margin-left: 50px" >
<p style="margin-left: 50px;margin-top: 0px;color: #99a9bf">{{ v.tag }}</p>
</el-row>
<el-row :span="8" style="margin-left: 650px;margin-top: -30px" >
<el-button type="primary" round>关注</el-button>
</el-row>
</el-col>
</el-card>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "fans",
data() {
return {}
},
methods: {},
created() {
}
name: "personalCenter",
components: {Sidebar,Handder},
data() {
return {
radio1: '1',
radio2: '2',
activeName: 'first',
abc: false,
number: [
{name : '张三',
tag:'美好的生活大概就是白天又说有笑晚上睡个好觉',
fans: 12,follow: 120},
{name : '李四',
tag:'我够坚强，但不是所有的伤我都能抗',
fans: 40,follow: 300},
{name : '王五',
tag:'你的微博辣妹有那么多，原来我只是其中一个',
fans: 67,follow: 420},
{name : '赵六',
tag:'姑娘姑娘我就要嫁人啦',
fans: 80,follow: 720},
]
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
},
created() {
}
}
</script>
<style scoped>
@media screen and (min-width: 1970px){
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
.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 {
/*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;
}
}
.el-card:hover{
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/follow.vue
浏览文件 @ 52c5c373
<!--个人中心-->
<template>
<div>
<div style="display: flex;
justify-content: center; width: calc(100vw - 500px);
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div style="width: 100%;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 class="idxs">
<!-- 设置关注和粉丝之间的跳转-->
<el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect" active-text-color="orange" router>
<el-menu-item index="/fans">粉丝</el-menu-item>
<el-menu-item index="/follow">关注</el-menu-item>
</el-menu>
<el-empty description="没有关注" v-if="abc"></el-empty>
<div v-for="v of number">
<el-card style="height: 120px;width: 800px;margin-left: 200px;margin-top: 30px;">
<el-col >
<el-row :span="8" style="margin-top: 10px">
<div>
<el-popover
placement="bottom"
width="200"
trigger="hover"
>
<el-row :gutter="10">
<el-col :span="12">
<span><i class="el-icon-user"></i><span>粉丝数:</span></span>
<span>{{ v.fans }}</span>
</el-col>
<el-col :span="12">
<span><i class="el-icon-user"></i><span>关注数:</span></span>
<span>{{ v.follow }}</span>
</el-col>
</el-row>
<el-avatar slot="reference" style="cursor: pointer" shape="square" :size="60" :src="squareUrl"></el-avatar>
</el-popover>
</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-row>
<el-row :span="8" style="margin-top: -55px;margin-left: 50px" >
<h3 style="margin-left: 50px;margin-top: 0px">{{ v.name }}</h3>
</el-row>
<el-row :span="8" style="margin-left: 50px" >
<p style="margin-left: 50px;margin-top: 0px;color: #99a9bf">{{ v.tag }}</p>
</el-row>
<el-row :span="8" style="margin-left: 650px;margin-top: -50px" >
<el-button type="primary" round>取消关注</el-button>
</el-row>
</el-col>
</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')
radio1: '1',
radio2: '2',
activeName: 'first',
abc: false,
number: [
{name : '将',
tag:'美好的生活大概就是白天又说有笑晚上睡个好觉',
fans: 12,follow: 120},
{name : '别',
tag:'我够坚强，但不是所有的伤我都能抗',
fans: 40,follow: 300},
{name : '吴',
tag:'你的微博辣妹有那么多，原来我只是其中一个',
fans: 67,follow: 420},
{name : '康',
tag:'姑娘姑娘我就要嫁人啦',
fans: 80,follow: 720},
]
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
},
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;
}
.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;
}
@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;
}
}
.el-card:hover{
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/history.vue
浏览文件 @ 52c5c373
<!--历史记录-->
<template>
<div>
<div class="idxs">
<div style="
height:1000px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div style="height: 1000px;position: absolute;">
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="height: 1000px;position: absolute;">
<div style="width: 1400px;height: 1000px;position: absolute;">
<br>
<div style="width:1200px;height:300px;margin-left:100px">
......@@ -69,9 +69,12 @@
</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",
......@@ -96,29 +99,29 @@ export default {
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 (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;*/
/* }*/
/*}*/
@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
浏览文件 @ 52c5c373
<!--通知-->
<template>
<div>
<div style="
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div style="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 class="idxs">
<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 style="height: 1000px">
<!--让编辑按钮处于一行的右侧-->
<div style="display: flex; justify-content: space-between;">
<span>全部消息</span>
</div>
<!--分隔行-->
<el-divider content-position="right"></el-divider>
<!--表格组件-->
<el-table @click="f()"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column class="aaa"
type="selection"
width="55">
</el-table-column>
<el-table-column class="aaa"
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column class="aaa"
prop="title"
label="标题"
width="120">
</el-table-column>
<el-table-column class="aaa"
prop="content"
label="内容"
show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px" v-show="this.deleate">
<el-button><i class="el-icon-delete"></i></el-button>
</div>
</el-card>
</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="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:""
size: "200",
avatarUrl: "",
tableData: [{
date: '2016-05-03',
title: '王小虎',
content: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
title: '王小虎',
content: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
title: '王小虎',
content: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
title: '王小虎',
content: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
title: '王小虎',
content: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
title: '王小虎',
content: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
title: '王小虎',
content: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: [],
deleate: false,
}
},
methods: {
handleSelectionChange() {
this.deleate = true;
}
},
methods: {},
created() {
}
......@@ -86,38 +111,32 @@ export default {
</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;
@media screen and (min-width: 1970px) {
.idxs {
margin: 60px auto;
width: calc(100% - 290px);
max-width: 1570px;
min-width: 1200px;
}
}
.box {
display: flex;
align-items: center;
@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: 350px;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/otherSpace.vue
浏览文件 @ 52c5c373
......@@ -2,12 +2,13 @@
<template>
<div>
<div>
<div >
<h1 >XXX的个人中心</h1>
<div >
<div>
<div class="idxs">
<h1 style="display: inline-block;margin-left: 530px;font-size: 45px;text-align: center;margin-top: 30px;margin-bottom: 30px">XXX的个人中心</h1>
<el-card>
<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>
......@@ -18,12 +19,12 @@
</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">
<div style="margin-left: 130px" >
<span><el-button plain style="padding: 10px;width: 90px" @click="focus()">
<i style="margin-left: 0" class="el-icon-edit"></i>{{ focu }}</el-button></span>
<span><el-button plain style="padding: 10px">
<i style="margin-left: 0" class="el-icon-edit"></i>动态</el-button></span>
</div>
</div>
<el-descriptions style="margin-left: 10px;" class="margin-top" :column="4" direction="vertical"
:colon="false">
<el-descriptions-item label="关注数">1</el-descriptions-item>
......@@ -38,7 +39,7 @@
</div>
<div style="margin-top: 30px;margin-left: 50px;height: 900px;">
<div style="width: 1300px;margin-top: 30px;margin-left: 50px;height: 900px;">
<el-card>
<h2>XXX的视频</h2>
......@@ -105,15 +106,26 @@
<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"
avatarUrl: require("@/assets/1.png"),
focu:"关注他", isFollowing: false
}
},
methods: {},
methods: {
focus(){
this.isFollowing = !this.isFollowing;
this.focu = this.isFollowing ? '取消关注' : '关注他';
}
},
created() {
}
......@@ -122,27 +134,30 @@ export default {
<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;*/
/* }*/
/*}*/
@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: 130px;
}
}
h2 {
font-weight: normal;
......
YouBili_front/src/views/personal/personalCenter.vue
浏览文件 @ 52c5c373
<!--个人中心-->
<template>
<div>
<div style="display: flex;
justify-content: center;
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div >
<div>
<h1 style="font-size: 45px;text-align: center;margin-top: 30px;margin-bottom: 30px">XXX的个人中心</h1>
<div class="idxs">
<h1 style="display: inline-block;margin-left: 530px;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">
......@@ -22,11 +20,11 @@
<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 style="margin-left: 10px;" class="margin-top" :column="4" direction="vertical" :colon="false">
<el-descriptions-item class="aa" label="关注数">1</el-descriptions-item>
<el-descriptions-item class="aa" label="粉丝数">1</el-descriptions-item>
<el-descriptions-item class="aa" label="获赞数">1</el-descriptions-item>
<el-descriptions-item class="aa"label="播放数">1</el-descriptions-item>
</el-descriptions></div>
......@@ -35,60 +33,47 @@
</div>
<div style="width: 1300px;margin-top: 30px;margin-left: 50px;height: 1000px;">
<el-card>
<h2>我的视频</h2><el-divider></el-divider>
<el-card >
<div v-for="p in videoArr">
<h2>{{ p.category }}</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><img :src="p.imgUrl1" style="width: 300px;height: 200px;margin-left: 80px"></span>
<span><img :src="p.imgUrl2" style="width: 300px;height: 200px;margin-left: 100px"></span>
<span><img :src="p.imgUrl3" 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>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"></i><i class="el-icon-folder-opened"></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><i class="el-icon-folder-opened"></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><i class="el-icon-folder-opened"></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>
</div>
</el-card>
</div>
</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:""
avatarUrl:require("@/assets/1.png"),
videoArr:[
{category:"我的视频",imgUrl1:require("@/assets/1.png"),imgUrl2:require("@/assets/1.png"),imgUrl3:require("@/assets/1.png")},
{category:"我的收藏",imgUrl1:require("@/assets/1.png"),imgUrl2:require("@/assets/1.png"),imgUrl3:require("@/assets/1.png")},
{category:"我的历史",imgUrl1:require("@/assets/1.png"),imgUrl2:require("@/assets/1.png"),imgUrl3:require("@/assets/1.png")}
]
}
},
methods: {},
......@@ -99,28 +84,31 @@ export default {
</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;*/
/* }*/
/*}*/
@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: 130px;
}
}
h2{
font-weight: normal;
}
......@@ -128,5 +116,11 @@ i{
display: inline-block;
margin-left: 20px;
}
.aa:hover{
cursor: pointer;
}
img:hover{
transform: scale(1.1);cursor: pointer;
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/report.vue
浏览文件 @ 52c5c373
<!--举报-->
<template>
<div>
<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 class="idxs">
<div class="idxs">
<div style="width: 1000px;height: 600px;margin-top: 20px;position: absolute">
......@@ -78,9 +76,12 @@
</template>
<script>
import Sidebar from "@/components/sidebar.vue";
import Handder from "@/components/Handder.vue";
export default {
name: "report",
components: {Handder, Sidebar},
data() {
return {
form: {
......@@ -110,28 +111,31 @@ export default {
</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 (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;*/
/* }*/
/*}*/
@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: 170px;
}
}
.el-form-item {
margin-bottom: 50px;
}
......
youbili-project-backend/pom.xml
浏览文件 @ 52c5c373
......@@ -17,44 +17,53 @@
<java.version>17</java.version>
</properties>
<dependencies>
<!-- JDBC -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>
<!-- security -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<!-- Spirng Web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Mybatis整合 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>3.0.2</version>
</dependency>
<!-- Mysql -->
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<!-- Lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!-- Spring测试 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- security测试单元 -->
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-test</artifactId>
<scope>test</scope>
</dependency>
<!-- SecurityConfig配置 -->
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-config</artifactId>
......@@ -73,7 +82,7 @@
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter -->
<!-- Mybatis-Plus -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
......@@ -87,33 +96,34 @@
<version>4.1.0</version>
</dependency>
<!-- security -->
<!-- Security-core 包含认证和访问权限控制功能 -->
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-core</artifactId>
</dependency>
<!--mail-->
<!-- mail -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mail</artifactId>
</dependency>
<!--redis-->
<!-- redis -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<!--转换成JSON格式-->
<!-- fastjson 转换成JSON格式 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>2.0.31</version>
</dependency>
<!-- durid -->
<!-- 阿里durid -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.2.18</version>
</dependency>
<!-- Spring提供的监控模块 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
......
youbili-project-backend/src/main/resources/application.yaml
浏览文件 @ 52c5c373
......@@ -7,7 +7,10 @@ spring:
url: jdbc:mysql://localhost:3306/youbili_test?characterEncoding=utf8
username: root
password: root
#邮箱配置
druid:
initial-size: 5
max-active: 50
#邮箱配置
mail:
host: smtp.163.com
username: 15901029458@163.com
......@@ -32,18 +35,18 @@ spring:
# static-locations: file:c:/files,classpath:static
# mybatis
mybatis:
mapper-locations: classpath:mapper/*.xml
configuration:
map-underscore-to-camel-case: true # 配置表字段名和属性名规范不一致时自动匹配
#mybatis:
# mapper-locations: classpath:mapper/*.xml
# configuration:
# map-underscore-to-camel-case: true # 配置表字段名和属性名规范不一致时自动匹配
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
mapper-locations: classpath:mapper/**/*.xml
logging:
level:
cn.tedu: debug
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或