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

first commit

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

22
历届学生/18课程/class18_2/项目/上课项目/枸杞社/css/clear.css Normal file
View File

@@ -0,0 +1,22 @@
body,ul,li,h1,h2,h3,h4,h5,h6,p,a {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
a {
text-decoration: none;
color: #000;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}
input {
outline: none;
border: none;
}
img {
width: 100%;
}

25
历届学生/18课程/class18_2/项目/上课项目/枸杞社/css/editClass.css Normal file
View File

@@ -0,0 +1,25 @@
.chioose {
margin-top: 0.3rem;
}
.chioose p {
font-size: 0.24rem;
margin-bottom: 0.14rem;
color: #666;
}
.chiooseWrap {
display: flex;
flex-wrap: wrap;
}
.chiooseWrap li{
width: 23.8%;
text-align: center;
font-size: 0.28rem;
border: 1px solid #ccc;
margin-bottom: 0.1rem;
padding: 0.1rem 0;
box-sizing: border-box;
margin-right: 0.1rem;
}
.chiooseWrap li:nth-child(4n) {
margin-right: 0 !important;
}

83
历届学生/18课程/class18_2/项目/上课项目/枸杞社/css/home.css Normal file
View File

@@ -0,0 +1,83 @@
.header {
height: 1.6rem;
position: fixed;
top: 0;
width: 100%;
left: 0;
z-index: 9;
}
.header_search {
padding: 0 0.3rem;
height: 0.88rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.header_search i {
font-size: 0.45rem;
color: #fff;
}
.search {
flex: 1;
background: #fff;
height: 0.6rem;
border-radius: 0.6rem;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 0.3rem;
margin: 0 0.2rem;
}
.search span {
font-size: 0.24em;
color: #999;
}
.search i{
color: #999;
font-size: 0.26rem;
margin-right: 0.1rem;
padding-top: 0.02rem;
}
.header_menu {
height: 0.72rem;
display: flex;
background: #fe7fa2;
align-items: center;
padding: 0 0.3rem;
}
.header_menu ul {
display: flex;
overflow-x: scroll;
height: 100%;
align-items: center;
flex: 1;
margin-right: 0.3rem;
}
.header_menu li {
font-size: 0.26rem;
flex-shrink: 0;
margin-right: 0.26rem;
color: #d3d2d2;
}
.header_menu a {
color: #fff;
font-size: 18px;
}
.header_menu .active {
color: #fff !important;
}
.content {
margin-top: 1.6rem;
}
.modelList {
overflow-x: hidden;
}
.swiper-slide {
height: calc(100vh - 1.6rem - 1rem);
overflow-y: scroll;
}
.swiper-wrapper,
.swiper-slide {
width: 100%;
flex-shrink: 0;
}

45
历届学生/18课程/class18_2/项目/上课项目/枸杞社/css/info.css Normal file
View File

@@ -0,0 +1,45 @@
.info {
width: 100%;
}
.ddd {
font-size: 0;
}
.info img {
width: 100%;
height: auto;
}
.info figure {
display: block;
margin: 0;
width: 100%;
font-size: 0;
}
.info figcaption {
display: none;
}
.info .info_item{
margin-bottom: 0.3rem;
}
.info_item p{
font-size: 0.24rem;
color: #8e8e8e;
text-align: center;
margin-bottom: 0.1rem;
}
.info_item img{
width: 100%;
}
.icon-xin {
}
.next_page {
display: inline-block;
font-size: 0.4rem;
margin-top: 0.2rem;
color: #fb7299;
width: 100%;
text-align: center;
}

23
历届学生/18课程/class18_2/项目/上课项目/枸杞社/css/mechanism.css Normal file
View File

@@ -0,0 +1,23 @@
.mechanism_list {
display: flex;
flex-wrap: wrap;
margin-top: 0.3rem;
padding: 0 0.3rem;
}
.mechanism_list li {
width: 25%;
text-align: center;
font-size: 0;
margin-bottom: 0.7rem;
}
.mechanism_list p {
font-size: 0.32rem;
margin-bottom: 0.06rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mechanism_list span {
font-size: 0.24rem;
color: #fb7299;
}

1
历届学生/18课程/class18_2/项目/上课项目/枸杞社/css/model.css Normal file
View File

@@ -0,0 +1 @@

44
历届学生/18课程/class18_2/项目/上课项目/枸杞社/css/my.css Normal file
View File

@@ -0,0 +1,44 @@
.header_my {
display: flex;
align-items: center;
justify-content: center;
height: 4rem;
flex-direction: column;
}
.header_my i{
font-size: 1.2rem;
margin-bottom: 0.2rem;
color: #fff;
}
.header_my p{
font-size: 0.32rem;
color: #fff;
}
.setting_list {
margin-top: 0.2rem;
}
.list_item:active {
background: #e6e6e6;;
}
.list_item a{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.3rem;
height: 0.96rem;
}
.item_left {
display: flex;
align-items: center;
}
.item_left .iconfont{
font-size: 0.4rem;
margin-right: 0.2rem;
}
.item_left span{
font-size: 0.3rem;
}
.icon-qianjin-tongyong {
font-size: 0.28rem;
color: #c3c0c0;
}

193
历届学生/18课程/class18_2/项目/上课项目/枸杞社/css/public.css Normal file
View File

@@ -0,0 +1,193 @@
.theme_color {
background: #fb7299;
}
.padding_30 {
padding: 0.3rem 0.3rem 0 0.3rem;
}
.padding_left_30 {
padding: 0 0.3rem;
}
/* 底部样式 */
.footer {
position: fixed;
width: 100%;
background: #fff;
height: 1rem;
bottom: 0;
}
.footer ul{
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
border-top: 0.02rem solid #e8ebec;
box-sizing: border-box;
padding-top: 0.1rem;
}
.footer ul li a{
display: flex;
flex-direction: column;
text-align: center;
}
.footer ul li i{
font-size: 0.3rem;
margin-bottom: 0.08rem;
}
.footer ul li span{
font-size: 0.24rem;
}
.footer_active i {
color: #fb7299;
}
.footer_active span {
color: #fb7299;
}
.header_theme1 {
position: fixed;
width: 100%;
height: 0.9rem;
left: 0;
top: 0;
display: flex;
align-items: center;
padding: 0 0.3rem;
box-sizing: border-box;
z-index: 999;
justify-content: space-between;
font-size: 0;
}
.header_theme1 i {
color: #fff;
margin-right: 0.2rem;
}
.header_theme1 span {
color: #fff;
font-size: 0.32rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content_theme1 {
padding-top: 0.9rem;
padding-bottom: 1rem;
}
.content_info {
padding-top: 0.9rem;
}
.item_list .title {
font-size: 0.34rem;
color: #333;
margin-bottom: 0.26rem;
margin-top: 0.3rem;
}
.modeList {
display: flex;
flex-wrap: wrap;
margin: 10px 0;
margin-top: 15px;
}
.modeList li {
width: 25%;
text-align: center;
margin-bottom: 0.3rem;
}
.modeList li p {
font-size: 0.24rem;
color: #7e7979;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.modeList li .top{
position: relative;
}
.modeList li .top img{
width: 1.2rem;
height: 1.2rem;
border-radius: 100%;
}
.modeList li .top span{
font-size: 0.22rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.06rem;
padding: 0.02rem 0.1rem;
background: rgb(0 0 0 / 58%);
color: #fff;
border-radius: 0.2rem;
}
.newList .title,
.recommended .title{
font-size: 0.34rem;
color: #333;
margin-bottom: 0.26rem;
}
.newList .title i ,
.recommended .title i{
color: #fb7299;
}
.newList ul ,
.recommended ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.newList ul li,
.recommended ul li{
width: 48%;
margin-bottom: 0.3rem;
}
.newList_img {
position: relative;
}
.newList_img img {
width: 100%;
height: 100%;
border-radius: 0.1rem;
}
.newList_img span {
position: absolute;
padding: 0.08rem 0.14rem;
background: rgb(251 114 153 / 73%);
color: rgb(255 255 255 / 73%);
font-size: 0.24rem;
right: 0.2rem;
bottom: 0.42rem;
border-radius: 0.28rem;
}
.newList_text .t{
color: #333;
font-size: 0.3rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0.08rem;
}
.newList_text .source{
color: #666;
font-size: 0.26rem;
margin-bottom: 0.02rem;
}
.newList_text .tags{
display: flex;
flex-wrap: wrap;
margin-top: 0.08rem;
}
.newList_text .tags .tags_item{
padding: 0.04rem 0.1rem;
font-size: 0.24rem;
background: #fb7299;
margin-right: 0.06rem;
color: #fff;
border-radius: 0.18rem;
margin-bottom: 0.06rem;
}

74
历届学生/18课程/class18_2/项目/上课项目/枸杞社/css/swiper.css Normal file
View File

@@ -0,0 +1,74 @@
.main {
width: 520px;
height: 280px;
margin: 40px auto;
}
@font-face {font-family: "iconfont";
src: url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.eot?t=1608534888851'); /* IE9 */
src: url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.eot?t=1608534888851#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.woff?t=1608534888851') format('woff'),
url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.ttf?t=1608534888851') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.svg?t=1608534888851#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-bangzhujinru:before {
content: "\e64e";
}
.icon-back:before {
content: "\e608";
}
.swiper-container {
height: 100%;
overflow-x: hidden;
position: relative;
}
.swiper-wrapper {
display: flex;
}
.swiper-pagination {
position: absolute;
display: flex;
z-index: 99;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.swiper-pagination-dot {
width: 15px;
height: 15px;
background: #fff;
border-radius: 100%;
margin-right: 10px;
cursor: pointer;
}
.dot-active {
background: red;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev,
.swiper-button-next{
cursor: pointer;
font-size: 25px;
color: white;
padding: 5px 2px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,.3);
}

12
历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/config/index.js Normal file
View File

@@ -0,0 +1,12 @@
var Config = {
DevelopmentPhase: 'dev', // dev, test, prod
DevUrl: 'http://127.0.0.1:3000/api/json',
TestUrl: 'http://127.0.0.1:3000/api/json/test',
ProdUrl: 'http://127.0.0.1:3000/api/json/prod',
ApiList: {
index: '/index',
info: '/info',
class: '/class',
classList: '/classList'
}
}

76
历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/http/index.js Normal file
View File

@@ -0,0 +1,76 @@
(function (){
class Ajax {
constructor() {
this.ajax = new XMLHttpRequest();
}
async get(option) {
var params = ""
for(var key in option.data) {
params+= `&${key}=${option.data[key]}`
}
params = params.replace("&", "?")
option.url = this.checkBaseUrl() + option.url + params
this.ajax.open("GET", option.url)
this.ajax.send()
return await this.readystatechange();
}
post(option) {
this.ajax.open("POST", this.checkBaseUrl() + option.url)
this.ajax.setRequestHeader("Content-Type","application/json")
this.ajax.send(JSON.stringify(option.data))
return this.readystatechange()
}
readystatechange() {
return new Promise( (success,error) => {
this.ajax.onreadystatechange = () => {
if (this.ajax.readyState == 4) {
if (this.ajax.status == 200) {
// 如果后端给的数据是string，才进行 JSON.parse
var result = typeof this.ajax.responseText == "string"
? JSON.parse(this.ajax.responseText)
: this.ajax.responseText;
switch (result.status) {
case 200:
success(result.data)
break;
case 500:
error(result.msg)
break;
default:
}
} else {
error("请求出错")
}
}
}
})
}
checkBaseUrl() {
switch (Config.DevelopmentPhase) {
case "dev":
return Config.DevUrl;
break;
case "test":
return Config.TestUrl;
break;
case "prod":
return Config.ProdUrl;
break
}
}
}
window.$get = new Ajax().get.bind(new Ajax());
window.$post = new Ajax().post.bind(new Ajax());
})()

80
历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/page/editClass.js Normal file
View File

@@ -0,0 +1,80 @@
class editClass {
constructor () {
this.defaultChioose = JSON.parse(localStorage.getItem("classList"));
this.YourChioose =
localStorage.getItem("YourChioose") == null
? []
: JSON.parse(localStorage.getItem("YourChioose"));
this.RenderDefault()
this.RenderAdd()
}
RenderDefault () {
utils.$(".you_chioose .chiooseWrap").innerHTML = "";
this.defaultChioose.forEach(v => {
utils.$(".you_chioose .chiooseWrap").innerHTML+=
`<li>${v.title}</li>`
});
document.querySelectorAll(".you_chioose .chiooseWrap li").forEach((v,i)=>{
v.onclick = () => {
console.log(i);
// 获取你点击的数据
this.YourChioose = [...this.YourChioose,this.defaultChioose[i]];
localStorage.setItem("YourChioose", JSON.stringify(this.YourChioose))
this.RenderAdd()
// 从原数据里面删除你点击的数据
this.defaultChioose = this.defaultChioose.filter((v)=>{
if (this.defaultChioose[i].id != v.id) {
return v
}
})
localStorage.setItem("classList", JSON.stringify(this.defaultChioose))
this.RenderDefault()
}
})
}
RenderAdd() {
utils.$(".chioose_list .chiooseWrap").innerHTML = "";
if (localStorage.getItem("YourChioose") != null) {
var a = JSON.parse(localStorage.getItem("YourChioose"));
a.forEach(v=> {
utils.$(".chioose_list .chiooseWrap").innerHTML+=
`
<li>${v.title}</li>
`
});
document.querySelectorAll(".chioose_list .chiooseWrap li").forEach((v,i)=>{
v.onclick = () => {
console.log(v);
// 获取点击对象
this.defaultChioose = [...this.defaultChioose,this.YourChioose[i]];
localStorage.setItem("classList", JSON.stringify(this.defaultChioose))
this.RenderDefault()
// 从原数据里面删除你点击的数据
this.YourChioose = this.YourChioose.filter((v)=>{
if (this.YourChioose[i].id != v.id) {
return v
}
})
localStorage.setItem("YourChioose", JSON.stringify(this.YourChioose))
this.RenderAdd()
}
})
};
}
}
new editClass()

170
历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/page/home.js Normal file
View File

@@ -0,0 +1,170 @@
class Home {
constructor() {
this.Swiper = null;
this.Menu = null;
this.TabsList = [
{ id: -1, title: '首页' },
]
this.initSwiper();
this.GetClass();
}
/**
* 获取首页的数据
*/
async GetIndex() {
var data = await homeService.index();
data.model.list.forEach(v => {
utils.$(".modeList").innerHTML +=
`
<li>
<div class="top">
<img src="${v.preview}" alt="">
<span>${v.total}</span>
</div>
<p>${v.title}</p>
</li>
`
})
utils.$(".news ul").innerHTML = utils.item(data.newest.list)
utils.$(".recommended ul").innerHTML = utils.item(data.recommended.list)
}
/**
* 初始化轮播图
*/
initSwiper() {
this.Swiper = new Swiper({
el: '.swiper-container',
initialSlide: 0
});
}
/**
* 获取分类
*/
async GetClass() {
var classList = [];
if (localStorage.getItem("classList") == null) {
classList = await homeService.class();
localStorage.setItem("classList", JSON.stringify(classList));
} else {
classList = JSON.parse(localStorage.getItem("classList"))
}
this.TabsList = [...this.TabsList, ...classList];
console.log(this.TabsList);
this.RenderSlide()
this.RenderMenu();
// 获取首页的数据
this.GetIndex();
}
RenderSlide() {
this.TabsList.forEach((v, i) => {
if (i != 0) {
utils.$(".swiper-wrapper").innerHTML +=
`
<div class="swiper-slide">
<div class="newList padding_30">
<ul>
</ul>
</div>
</div>
`
}
});
var newList = document.querySelectorAll(".swiper-slide")
var self = this;
newList.forEach((v, i) => {
if (i > 0) {
v.addEventListener("scroll", function () {
if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
console.log("到底了: ", self.TabsList[i]);
self.TabsList[i].page += 1;
if (self.TabsList[i].page <= self.TabsList[i].totalPage) {
self.GetClassList(i,'more')
}
}
})
}
})
}
/**
* 渲染菜单
*/
RenderMenu() {
this.TabsList.forEach((v, i) => {
utils.$(".header_menu ul").innerHTML +=
`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
});
var Li = document.querySelectorAll(".header_menu ul li");
// 轮播图切换的时候，改变li的激活样式
this.Swiper.on("slideChange", (index) => {
this.GetClassList(index)
Li.forEach(t => t.classList.remove("active"))
Li[index].classList.add("active")
});
// 点击li的时候，切换轮播图，并改变li激活样式
Li.forEach((v, i) => {
v.onclick = () => {
this.GetClassList(i)
Li.forEach(t => t.classList.remove("active"))
this.Swiper.slideTo(i);
v.classList.add("active")
}
});
}
/**
* 获取分类的列表
*/
GetClassList(index, type = "click") {
var getData = async () => {
var data = await homeService.classList({
id: this.TabsList[index].id,
page: this.TabsList[index].page
});
// 存储改分类的总页数
this.TabsList[index].totalPage = data.total_page
// 合并数据
this.TabsList[index].content =
[
...this.TabsList[index].content
,
...data.list
];
var Silde = utils.$(".swiper-wrapper .swiper-slide");
// 向内容中插入li标签
Silde[index].querySelector("ul").innerHTML += utils.item(data.list)
}
if (type == "click") {
// 不是首页，并且没有数据，才发送请求
if (this.TabsList[index].id != -1 && this.TabsList[index].content.length == 0) {
getData()
}
} else {
getData()
}
}
}
new Home()

89
历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/page/info.js Normal file
View File

@@ -0,0 +1,89 @@
class info {
constructor() {
this.page = 1;
this.totalPage = null;
this.res = {};
this.LikeArr =
localStorage.getItem("LikeList") == null
? []
: JSON.parse(localStorage.getItem("LikeList"));
this.GetInfo();
this.Like()
}
async GetInfo() {
this.res = await infoService.info({
id: utils.GetQueryString("id"),
page: this.page
});
// 渲染详情图片
this.res.list.forEach((v) => {
utils.$(".info").innerHTML +=
`<img src="${v.src}" alt="">`
})
this.totalPage = this.res.total_page
utils.$(".news ul").innerHTML = utils.item(this.res.recommend)
utils.$(".relevant ul").innerHTML = utils.item(this.res.relevant)
console.log(this.res);
utils.$(".next_page").onclick = () => {
this.page += 1;
if (this.page <= this.totalPage) {
this.GetInfo()
if (this.page == this.totalPage) {
utils.$(".next_page").style.display = "none"
}
} else {
utils.$(".next_page").style.display = "none"
}
}
}
Like() {
var like = document.querySelector(".like");
var isLike = this.LikeArr.filter(v => {
if (v.id == utils.GetQueryString("id")) {
return v
}
});
// 收藏过了
if (isLike.length != 0) {
like.className = "like iconfont icon-aixin";
}
like.onclick = () => {
// 进行收藏
if (like.className.indexOf("icon-xin") != -1) {
like.className = "like iconfont icon-aixin";
this.LikeArr.push({
id: utils.GetQueryString("id"),
title: this.res.title,
source: this.res.source,
total: this.res.total,
info: this.res.info,
src: this.res.list[0].src,
total: this.res.total,
})
localStorage.setItem("LikeList", JSON.stringify(this.LikeArr))
// 取消收藏
} else {
console.log("1111111");
like.className = "like iconfont icon-xin";
this.LikeArr = this.LikeArr.filter(v => {
if (v.id != utils.GetQueryString("id")) {
return v
}
});
localStorage.setItem("LikeList", JSON.stringify(this.LikeArr))
}
}
}
}
new info()

3
历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/service/CarService.js Normal file
View File

@@ -0,0 +1,3 @@
class CarService {
}

34
历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/service/HomeService.js Normal file
View File

@@ -0,0 +1,34 @@
class HomeService {
async index(data = {}) {
return await $get({
url: Config.ApiList.index,
data: data
});
}
async class(data = {}) {
var data = await $get({
url: Config.ApiList.class,
data: data
});
data.forEach(v => {
v.page = 0;
v.content = [];
v.totalPage = 0;
});
return data;
}
async classList(data = {}) {
return await $get({
url: Config.ApiList.classList,
data: data
});
}
}
var homeService = new HomeService();

11
历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/service/InfoService.js Normal file
View File

@@ -0,0 +1,11 @@
class InfoService {
async info(data = {}) {
return await $get({
url: Config.ApiList.info,
data: data
});
}
}
var infoService = new InfoService();

14
历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/service/笔记.txt Normal file
View File

@@ -0,0 +1,14 @@
1：页面调用 service 中的方法
service 中的方法调用 ajax，来发送请求
2：ajax把数据给service的方法，service可以对数据进行各种
业务上的处理
3：处理好后给页面使用
如何拿到异步函数的返回数值
1：callback
2：Promise

100
历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/utils/index.js Normal file
View File

@@ -0,0 +1,100 @@
class Utils {
/**
* 根据数据渲染标准的item结构
* @param {*} arr
*/
item(arr) {
var html = "";
arr.forEach(v => {
html += `
<li>
<a href="./info.html?id=${v.id}">
<div class="newList_img">
<img src="${v.preview}" alt="${v.title}">
${
v.hasOwnProperty("total")
? `<span>${v.total}套</span>`
: ''
}
</div>
<div class="newList_text">
<p class="t">${v.title}</p>
${
v.hasOwnProperty("user")
? `<div class="source">${v.user}</div>`
: ''
}
${
v.hasOwnProperty("source")
? `<div class="source">${v.source}</div>`
: ''
}
${
v.hasOwnProperty("tags")
? `<div class="tags">
${(v.tags.map((t) => {
return
`<div class="tags_item">${t.title}</div>`
})).toString().replace(/,/ig, " ")
}
</div>`
: ""
}
</div>
</a>
</li>
`
});
return html
}
$(className) {
var classNameArr = className.split(" ");
if (classNameArr.length == 1) {
return document.querySelector(className)
} else {
// 多类名的时候，获取最后一个类名的上一个类名
var fatherClassName = classNameArr[classNameArr.length - 2];
// 获取最后一个类名
var lastClassName = classNameArr[classNameArr.length - 1];
var NewArr = []
// 获取父级有多少个子元素
var childrenList = document.querySelector(fatherClassName).children;
// 返回你要的子元素
for (let i = 0; i < childrenList.length; i++) {
if (
childrenList[i].className.indexOf(lastClassName.replace(".", "")) != -1
||
childrenList[i].localName == lastClassName
) {
NewArr.push(childrenList[i])
}
}
return NewArr.length == 1 ? NewArr[0] : NewArr
// // 如果只有一个，返回html
// if (NewArr.length == 1) {
// return NewArr[0]
// // 多个直接返回数组
// } else {
// return NewArr
// }
}
}
GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
}
var utils = new Utils();

22
历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/utils/rem.js Normal file
View File

@@ -0,0 +1,22 @@
!(function(win, doc) {
function setFontSize() {
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 750) * 100 + 'px';
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
//初始化
setFontSize();
}(window, document));

351
历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/utils/swiper.js Normal file
View File

@@ -0,0 +1,351 @@
(function () {
// 插件的默认参数
var defaultOption = {
el: '.swiper-container',
reverse: true,
eventBus: {},
timer: null,
statusCallChangeX: true,
containerWidth: function () {
return $(this.el).clientWidth
},
loop: false, // false 不开启， true 开启
autoPlay: false,
autoTime: 300,
speed: 300,
direction: 'horizontal',
initialSlide: 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
}
};
// 模拟类
function Swiper(option) {
if (option.hasOwnProperty("el") && option.el.length != 0) {
defaultOption.el = option.el;
defaultOption.loop = option.loop || defaultOption.loop;
defaultOption.autoPlay = option.autoPlay || defaultOption.autoPlay;
defaultOption.autoTime = option.autoTime || defaultOption.autoTime;
defaultOption.speed = option.speed || defaultOption.speed;
defaultOption.direction = option.direction || defaultOption.direction;
// defaultOption.initialSlide = option.initialSlide || defaultOption.initialSlide;
defaultOption.speed = option.speed || defaultOption.speed;
if (option.hasOwnProperty("initialSlide")) {
defaultOption.initialSlide = option.initialSlide
} else {
defaultOption.initialSlide = null
}
if (option.hasOwnProperty("navigation")) {
if (option.navigation.hasOwnProperty("nextEl")) {
defaultOption.navigation.nextEl = option.navigation.nextEl
}
if (option.navigation.hasOwnProperty("prevEl")) {
defaultOption.navigation.prevEl = option.navigation.prevEl
}
}
if (option.hasOwnProperty("on")) {
for (const key in option.on) {
if (!defaultOption.eventBus.hasOwnProperty(key)) {
defaultOption.eventBus[key] = option.on[key];
} else {
throw new Error(`方法：${key}已经存在`)
}
}
}
this.init()
} else {
throw new Error("缺少必填参数el或el为空");
}
}
Swiper.prototype = {
init() {
this.createdDot();
defaultOption.initialSlide == null ? '' : this.initialSlide();
this.bindNextEl();
this.bindPrevEl();
defaultOption.autoPlay ? this.AutoPlay() : '';
},
/**
* 默认显示第几张轮播图
*/
initialSlide() {
var offset = -defaultOption.initialSlide * defaultOption.containerWidth();
this.changeX(offset);
this.DotChange(defaultOption.initialSlide)
},
/**
* 下一页
*/
bindNextEl() {
if ($(defaultOption.navigation.nextEl) != null) {
$(defaultOption.navigation.nextEl).onclick = () => {
this.loopChange("next")
}
}
},
/**
* 上一页
*/
bindPrevEl() {
if ($(defaultOption.navigation.prevEl) != null) {
$(defaultOption.navigation.prevEl).onclick = () => {
this.loopChange("prev")
}
}
},
/**
* 计算移动距离，和越界处理
* @param offset
*/
animation(offset) {
var oldOffset = parseInt($(".swiper-wrapper").style.transform.substring(11));
var newOffset = oldOffset + offset;
if (newOffset < -1040) {
newOffset = 0
};
if (newOffset > 0) {
newOffset = -1040
};
this.DotChange(
Math.abs(newOffset / defaultOption.containerWidth())
);
this.changeX(newOffset)
},
/**
* 创建小圆点
*/
createdDot() {
// 如果没有小圆点的父级dom元素，那么不创建小圆点
if ($(defaultOption.pagination.el) != null) {
var Slide = $(".swiper-wrapper .swiper-slide");
Slide.forEach((v, i) => {
$(defaultOption.pagination.el).innerHTML +=
`<div class="swiper-pagination-dot ${i == 0 ? 'dot-active' : ''}"></div>`
});
// 绑定事件
var children = $(`${defaultOption.pagination.el} swiper-pagination-dot`)
children.forEach((v, i) => {
v.onclick = () => {
this.DotChange(i)
}
});
// var children = $(defaultOption.pagination.el).children
// for (var i = 0; i < children.length; i++) {
//
// ((index)=>{
//
// children[index].onclick = () => {
// this.DotChange(index)
// }
//
// })(i);
//
// }
}
},
/**
* 小圆点切换
* @param index 下标
*/
DotChange(index) {
if ($(defaultOption.pagination.el) != null) {
// 保存最新的下标
defaultOption.initialSlide = index;
// 调用事件，回传最新下标给用户的方法
defaultOption.eventBus.slideChange
&& defaultOption.eventBus.slideChange(defaultOption.initialSlide)
// 改变小圆点的激活样式
var children = $(defaultOption.pagination.el).children;
for (var i = 0; i < children.length; i++) {
children[i].classList.remove("dot-active")
}
children[index].classList.add("dot-active")
// 移动轮播图
this.changeX(index * -defaultOption.containerWidth())
}
},
/**
* 让图片动起来
* @param x
*/
changeX(x) {
var style = null;
// 通过变量 statusCallChangeX 判断方法是否是第一次执行，如果是第一次执行
// 那么不需要 transition-duration 动画时间
// 主要是解决：initialSlide 的bug
if (defaultOption.statusCallChangeX) {
style = `transform: translateX(${x}px);`;
} else {
style =
`
transition-duration: ${defaultOption.speed / 1000}s;
transform: translateX(${x}px);
`
}
defaultOption.statusCallChangeX = false;
$(".swiper-wrapper").style = style
},
/**
* 自动播放
* @constructor
*/
AutoPlay() {
timer = setInterval(
() => {
// 如果开启了循环播放
if (defaultOption.loop) {
// 向下一页播放
this.loopChange("next")
} else {
// 如果不是最后一张
if (defaultOption.initialSlide != $(".swiper-wrapper").children.length - 1) {
// 因为这行代码会被重复执行，所以需要做一个变量来决定轮播图移动的方向
// 进而判断向什么方向保持继续移动
if (defaultOption.reverse) {
this.loopChange("next")
} else {
this.loopChange("prev")
}
} else {
this.loopChange("prev")
defaultOption.reverse = false
}
// 判断是否是第一张，如果是第一张，那么改变方向(下一页)
if (defaultOption.initialSlide == 0) {
defaultOption.reverse = true
}
}
},
defaultOption.autoTime);
$(defaultOption.el).onmousemove = () => clearInterval(timer);
$(defaultOption.el).onmouseout = () => this.AutoPlay();
},
/**
* 循环切换的公共代码封装
*/
loopChange(type) {
if (defaultOption.loop) {
this.animation(
type == 'next' ? -defaultOption.containerWidth() : defaultOption.containerWidth()
)
} else {
if (
defaultOption.initialSlide
!=
(type == "next"
? $(".swiper-wrapper").children.length - 1
: 0)
) {
this.animation(type == 'next' ? -defaultOption.containerWidth() : defaultOption.containerWidth())
}
}
},
// ----------- 对外暴露的方法 ----------
/**
* 事件控制中心
* @param methodsName
* @param callBack
*/
on(methodsName, callBack) {
if (!defaultOption.eventBus.hasOwnProperty(methodsName)) {
defaultOption.eventBus[methodsName] = callBack;
switch (methodsName) {
case 'slideChange':
defaultOption.eventBus[methodsName](defaultOption.initialSlide)
break;
}
} else {
throw new Error(`方法：${methodsName}已经存在`)
}
},
/**
* 切换轮播图
* @param index
*/
slideTo(index = 0) {
this.changeX(-index * defaultOption.containerWidth());
this.DotChange(index)
}
}
function $(className) {
var classNameArr = className.split(" ");
if (classNameArr.length == 1) {
return document.querySelector(className)
} else {
// 多类名的时候，获取最后一个类名的上一个类名
var fatherClassName = classNameArr[classNameArr.length - 2];
// 获取最后一个类名
var lastClassName = classNameArr[classNameArr.length - 1];
var NewArr = []
// 获取父级有多少个子元素
var childrenList = document.querySelector(fatherClassName).children;
// 返回你要的子元素
for (let i = 0; i < childrenList.length; i++) {
if (childrenList[i].className.indexOf(lastClassName.replace(".", "")) != -1) {
NewArr.push(childrenList[i])
}
}
return NewArr.length == 1 ? NewArr[0] : NewArr
// // 如果只有一个，返回html
// if (NewArr.length == 1) {
// return NewArr[0]
// // 多个直接返回数组
// } else {
// return NewArr
// }
}
}
window.Swiper = Swiper
})()
// 自执行函数

43
历届学生/18课程/class18_2/项目/上课项目/枸杞社/page/editClass.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<title>枸杞社</title>
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_9zhdcjwpc1o.css">
<link rel="stylesheet" href="../css/swiper.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/editClass.css">
</head>
<body>
<div class="header_theme1 theme_color">
<div class="action">
<i class="iconfont icon-back1"></i>
<span>分类管理</span>
</div>
</div>
<div class="content_theme1 padding_30">
<div class="you_chioose chioose">
<p>点击删除以下分类</p>
<ul class="chiooseWrap"></ul>
</div>
<div class="chioose_list chioose">
<p>点击添加以下分类</p>
<ul class="chiooseWrap">
</ul>
</div>
</div>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/page/editClass.js"></script>
</html>

102
历届学生/18课程/class18_2/项目/上课项目/枸杞社/page/home.html Normal file
View File

@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/swiper.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_fax348tpohd.css">
<link rel="stylesheet" href="../css/home.css">
</head>
<body>
<div class="header">
<div class="header_search theme_color">
<i class="iconfont icon-taozi1"></i>
<div class="search">
<i class="iconfont icon-search"></i>
<span>198万张图，有你想要的...</span>
</div>
<i class="iconfont icon-wo"></i>
</div>
<div class="header_menu">
<ul>
</ul>
<a href="editClass.html" class="iconfont icon-edit"></a>
</div>
</div>
<div class="content">
<div class="swiper-container">
<div class="swiper-wrapper" style="transform: translateX(0px);">
<div class="swiper-slide">
<ul class="modeList padding_left_30"></ul>
<!-- 最新收录 -->
<div class="newList news padding_30">
<div class="title">
<i class="iconfont icon-huo"></i>
最新收录
</div>
<ul></ul>
</div>
<!-- 今日推荐 -->
<div class="recommended padding_30">
<div class="title">
<i class="iconfont icon-tuijian"></i>
今日推荐
</div>
<ul>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<ul>
<li class="footer_active">
<a href="./home.html">
<i class="iconfont icon-home"></i>
<span>首页</span>
</a>
</li>
<li>
<a href="./mechanism.html">
<i class="iconfont icon-jigou"></i>
<span>机构</span>
</a>
</li>
<li>
<a href="./model.html">
<i class="iconfont icon-me"></i>
<span>模特</span>
</a>
</li>
<li>
<a href="./my.html">
<i class="iconfont icon-wo"></i>
<span>我的</span>
</a>
</li>
</ul>
</div>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/service/HomeService.js"></script>
<script src="../js/utils/swiper.js"></script>
<script src="../js/page/home.js"></script>
</html>

60
历届学生/18课程/class18_2/项目/上课项目/枸杞社/page/info.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<title>枸杞社</title>
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_9zhdcjwpc1o.css">
<link rel="stylesheet" href="../css/swiper.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/info.css">
</head>
<body>
<div class="header_theme1 theme_color">
<div class="action">
<i class="iconfont icon-back1"></i>
<span>写真集详情</span>
</div>
<div class="right">
<i class="like iconfont icon-xin"></i>
</div>
</div>
<div class="content_info ddd">
<div class="info">
</div>
<i class="iconfont icon-xiangxia next_page"></i>
<div class="newList news padding_30">
<div class="title">
推荐写真
</div>
<ul></ul>
</div>
<div class="newList relevant padding_30">
<div class="title">相关写真</div>
<ul></ul>
</div>
</div>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/service/InfoService.js"></script>
<script src="../js/page/info.js"></script>
</html>

90
历届学生/18课程/class18_2/项目/上课项目/枸杞社/page/mechanism.html Normal file
View File

@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<title>枸杞社</title>
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xz9sxo44gx.css">
<link rel="stylesheet" href="../css/swiper.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/mechanism.css">
</head>
<body>
<div class="header_theme1 theme_color">
<div class="action">
<i class="iconfont icon-back1"></i>
<span>机构</span>
</div>
</div>
<div class="content_theme1">
<ul class="mechanism_list">
<li>
<a href="./mechanism_info.html?id=101&amp;t=ARTGRAVIA&amp;type=mechanism">
<p>ARTGRAVIA</p>
<span>19 套</span>
</a>
</li>
<li>
<a href="./mechanism_info.html?id=101&amp;t=ARTGRAVIA&amp;type=mechanism">
<p>ARTGRAVIA</p>
<span>19 套</span>
</a>
</li>
<li>
<a href="./mechanism_info.html?id=101&amp;t=ARTGRAVIA&amp;type=mechanism">
<p>ARTGRAVIA</p>
<span>19 套</span>
</a>
</li>
<li>
<a href="./mechanism_info.html?id=101&amp;t=ARTGRAVIA&amp;type=mechanism">
<p>ARTGRAVIA</p>
<span>19 套</span>
</a>
</li>
</ul>
</div>
<div class="footer">
<ul>
<li>
<a href="./home.html">
<i class="iconfont icon-home"></i>
<span>首页</span>
</a>
</li>
<li class="footer_active">
<a href="./mechanism.html">
<i class="iconfont icon-jigou"></i>
<span>机构</span>
</a>
</li>
<li>
<a href="./model.html">
<i class="iconfont icon-me"></i>
<span>模特</span>
</a>
</li>
<li>
<a href="./my.html">
<i class="iconfont icon-wo"></i>
<span>我的</span>
</a>
</li>
</ul>
</div>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/service/HomeService.js"></script>
<script src="../js/utils/swiper.js"></script>
<script src="../js/page/home.js"></script>
</html>

200
历届学生/18课程/class18_2/项目/上课项目/枸杞社/page/model.html Normal file
View File

@@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<title>枸杞社</title>
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xz9sxo44gx.css">
<link rel="stylesheet" href="../css/swiper.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/model.css">
</head>
<body>
<div class="header_theme1 theme_color">
<div class="action">
<i class="iconfont icon-back1"></i>
<span>模特</span>
</div>
</div>
<div class="content_theme1">
<div class="hot_models item_list padding_30">
<div class="title">热门模特</div>
<ul class="modeList">
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/2143.jpg" alt="">
<span>40套</span>
</div>
<p>文欣 ( 丽柜文欣 )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/2075.jpg" alt="">
<span>46套</span>
</div>
<p>石川恋 ( 石川戀 )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/3173.jpg" alt="">
<span>25套</span>
</div>
<p>唐琪儿 ( 王艳卓,唐琪儿il )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/118.jpg" alt="">
<span>37套</span>
</div>
<p>刘飞儿 ( 刘飞儿Faye,奶飞 )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/1859.jpg" alt="">
<span>5套</span>
</div>
<p>广濑爱丽丝 ( 広瀬アリス,広瀬晶 )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/2847.jpg" alt="">
<span>39套</span>
</div>
<p>筱筱 ( 丽柜筱筱 )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/1958.jpg" alt="">
<span>6套</span>
</div>
<p>石田亚佑美 ( 石田亜佑美 )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/624.jpg" alt="">
<span>6套</span>
</div>
<p>平野绫 ( 平野綾 )</p>
</li>
</ul>
</div>
<div class="newest item_list padding_30">
<div class="title">热门模特</div>
<ul class="modeList">
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/2143.jpg" alt="">
<span>40套</span>
</div>
<p>文欣 ( 丽柜文欣 )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/2075.jpg" alt="">
<span>46套</span>
</div>
<p>石川恋 ( 石川戀 )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/3173.jpg" alt="">
<span>25套</span>
</div>
<p>唐琪儿 ( 王艳卓,唐琪儿il )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/118.jpg" alt="">
<span>37套</span>
</div>
<p>刘飞儿 ( 刘飞儿Faye,奶飞 )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/1859.jpg" alt="">
<span>5套</span>
</div>
<p>广濑爱丽丝 ( 広瀬アリス,広瀬晶 )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/2847.jpg" alt="">
<span>39套</span>
</div>
<p>筱筱 ( 丽柜筱筱 )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/1958.jpg" alt="">
<span>6套</span>
</div>
<p>石田亚佑美 ( 石田亜佑美 )</p>
</li>
<li>
<div class="top">
<img src="http://127.0.0.1:3000/api/json/url?url=https://tjg.hywly.com/t/624.jpg" alt="">
<span>6套</span>
</div>
<p>平野绫 ( 平野綾 )</p>
</li>
</ul>
</div>
</div>
<div class="footer">
<ul>
<li>
<a href="./home.html">
<i class="iconfont icon-home"></i>
<span>首页</span>
</a>
</li>
<li>
<a href="./mechanism.html">
<i class="iconfont icon-jigou"></i>
<span>机构</span>
</a>
</li>
<li class="footer_active">
<a href="./model.html">
<i class="iconfont icon-me"></i>
<span>模特</span>
</a>
</li>
<li>
<a href="./my.html">
<i class="iconfont icon-wo"></i>
<span>我的</span>
</a>
</li>
</ul>
</div>
</body>
<script src="../js/utils/swiper.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/service/HomeService.js"></script>
</html>

105
历届学生/18课程/class18_2/项目/上课项目/枸杞社/page/my.html Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<title>枸杞社</title>
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_fax348tpohd.css">
<link rel="stylesheet" href="../css/swiper.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/my.css">
</head>
<body>
<div class="header_my theme_color">
<i class="iconfont icon-wo"></i>
<p>我的</p>
</div>
<div class="content_my">
<div class="setting_list">
<div class="list_item">
<a href="./like.html">
<div class="item_left">
<i class="iconfont icon-zuji"></i>
<span>我的收藏</span>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
</a>
</div>
<div class="list_item">
<a href="./about_us.html">
<div class="item_left">
<i class="iconfont icon-guanyu"></i>
<span>关于我们</span>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
</a>
</div>
<div class="list_item">
<a href="./agreement.html">
<div class="item_left">
<i class="iconfont icon-xieyiguanli"></i>
<span>用户协议</span>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
</a>
</div>
<div class="list_item updateApp">
<a>
<div class="item_left">
<i class="iconfont icon-shengji"></i>
<span>检测升级</span>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
</a>
</div>
<div class="list_item clearData">
<a>
<div class="item_left">
<i class="iconfont icon-clean"></i>
<span>清除缓存</span>
</div>
<i class="iconfont icon-qianjin-tongyong"></i>
</a>
</div>
</div>
</div>
<div class="footer">
<ul>
<li>
<a href="./home.html">
<i class="iconfont icon-home"></i>
<span>首页</span>
</a>
</li>
<li>
<a href="./mechanism.html">
<i class="iconfont icon-jigou"></i>
<span>机构</span>
</a>
</li>
<li>
<a href="./model.html">
<i class="iconfont icon-me"></i>
<span>模特</span>
</a>
</li>
<li class="footer_active">
<a href="./my.html">
<i class="iconfont icon-wo"></i>
<span>我的</span>
</a>
</li>
</ul>
</div>
</body>
</html>

16
历届学生/18课程/class18_2/项目/上课项目/枸杞社/page/test.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<div>1</div>
</body>
</html>