Skip to content

Commit

Permalink
fix:style
Browse files Browse the repository at this point in the history
  • Loading branch information
@zixuan1986
zixuan1986 committed Dec 20, 2023
1 parent d2bd647 commit 477a354
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 165 deletions.
122 changes: 22 additions & 100 deletions src/assets/css/horse/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
.horse-home-wrapper {
.pt(40px);
position: relative;

.m-common-tabs {
.u-tab {
transition: 0.3s ease-out;
&.active,
&:hover {
background: #d16400;
color: #fff;
}
}
}
.m-horse-content {
.m-horse-broadcast__header {
.mb(10px);
Expand Down Expand Up @@ -36,104 +45,17 @@
color: #24292e;
}
}
// .operate-wrap {
// display: flex;
// justify-content: flex-end;
// align-items: center;
// .list-type-wrapper {
// display: flex;
// justify-content: flex-end;
// align-items: center;
// border-radius: 30px;
// padding: 3px;
// background-color: #fff;
// .list-type-item {
// font-size: 13px;
// background-color: #fff;
// color: #bbb;
// padding: 5px 15px;
// text-align: center;
// cursor: pointer;
// &:hover {
// font-weight: bold;
// color: @active-color;
// }
// &:first-of-type {
// border-top-left-radius: 30px;
// border-bottom-left-radius: 30px;
// }
// &:last-of-type {
// border-top-right-radius: 30px;
// border-bottom-right-radius: 30px;
// }
// &.active {
// font-weight: bold;
// color: #fff;
// border-radius: 30px;
// background: @active-color;
// }
// }
// }
// }
}

// .list-wrapper {
// min-height: 300px;
// .list-item-wrapper {
// .title-header {
// margin: 40px 0 20px 0;
// display: flex;
// justify-content: space-between;
// align-items: flex-end;
// .title {
// font-weight: 700;
// font-size: 28px;
// height: 42px;
// line-height: 42px;
// color: #24292e;
// }
// a {
// font-weight: 400;
// font-size: 16px;
// line-height: 21px;
// color: #a5a5a5;
// }
// }
// .no-cross-wrap {
// .list {
// display: flex;
// gap: 20px;
// }
// }
// }
// .list-card-content {
// position: relative;
// display: flex;
// justify-content: flex-start;
// align-items: center;
// flex-wrap: wrap;
// gap: 20px;
// .more-btn {
// width: 100%;
// }
// }
// .list-content {
// gap: 20px;
// }
// }
@media screen and (max-width: @phone) {
.horse-home-wrapper {
.m-list-wrapper {
.m-common-list--v2 {
overflow: auto;
.same-item {
flex-shrink: 0;
}
}
}
}
}
// @media screen and (max-width: @ipad) {
// .horse-home-wrapper {
// .list-wrapper {
// .list-card-content {
// justify-content: space-evenly;
// }
// }
// }
// }
// @media screen and (max-width: @phone) {
// .horse-home-wrapper {
// .list-wrapper {
// .pt(64px);
// }
// }
// }
5 changes: 4 additions & 1 deletion src/assets/css/horse/single.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
gap: 20px;
.img-wrap {
.size(390px);
.r(10px);
.r(10px);
background-color: #fff;
padding: 20px;
box-sizing: border-box;
Expand Down Expand Up @@ -168,6 +168,9 @@

@media screen and (max-width: @phone) {
.horse-single-wrapper {
.horse-single-content .main-info-wrap .img-wrap .u-image {
.w(100%);
}
.main-info-wrapper {
.mt(0);
}
Expand Down
3 changes: 1 addition & 2 deletions src/service/horse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ function getHorses(params) {
});
}

function getHorse(params) {
console.log(params)
function getHorse(params) {
return $.get(`/horse`, {
params,
});
Expand Down
150 changes: 88 additions & 62 deletions src/views/horse/Index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,64 @@
<template>
<div class="horse-home-wrapper">
<!-- <PvxSearch :items="searchProps" :initValue="initValue" @search="searchEvent($event)"></PvxSearch> -->
<div class="m-share-tabs m-common-tabs">
<div class="m-common-card">
<div
v-for="item in list"
:key="item.type"
class="u-tab"
@click="clickTabs(item.type)"
:class="{ active: item.type === active }"
>
{{ item.name }}
</div>
</div>
<el-popover
ref="popover"
:placement="isPhone ? 'right' : 'bottom'"
:width="!isPhone && 420"
trigger="click"
>
<div class="filter-content">
<div class="filter-item" v-for="(sItem, i) in searchType" :key="i">
<div class="check-box-wrapper">
<div class="name">{{ sItem.name }}</div>
<el-checkbox-group v-model="searchType[i].checked">
<el-checkbox-button
v-for="option in sItem.list"
:label="option.label"
:key="option.value"
></el-checkbox-button>
</el-checkbox-group>
</div>
</div>
<el-row>
<el-col :offset="20" :span="4">
<el-button size="mini" type="info" plain @click="reset">重置</el-button>
</el-col>
</el-row>
</div>
<div class="filter-img" slot="reference">
<img svg-inline src="@/assets/img/filter.svg" fill="#949494" />
</div>
</el-popover>
<div class="u-search m-common-card">
<el-input
placeholder="输入关键词搜索"
v-model="keyword"
clearable
suffix-icon="el-icon-search"
class="u-search-input"
/>
</div>
</div>
<div class="m-horse-content" ref="listRef" v-loading="loading">
<!-- 全部模式 -->
<template v-if="active === ''">
<!-- 抓马播报 -->
<HorseBroadcast v-if="client === 'std'"></HorseBroadcast>
<!-- 普通坐骑、奇趣坐骑、马具 -->
<div v-for="(item, i) in list" :key="i" class="m-list-wrapper">
<template v-if="item.list.length">
<template v-if="item.list && item.list.length">
<div class="u-type">
<div class="u-title">
{{ item.name }}
Expand Down Expand Up @@ -169,59 +219,22 @@ export default {
appendMode: false,
feeds: [],
attrs: [],
searchProps: [
{
key: "type",
name: "类型",
type: "radio",
options: [
{
type: "",
name: "全部",
},
{
type: 0,
name: "普通坐骑",
},
{
type: 1,
name: "奇趣坐骑",
},
{
type: 2,
name: "马具",
},
],
},
searchType: [
{
type: "filter",
key: "filter",
name: "过滤",
options: [
{
key: "feed",
type: "checkbox",
name: "喂食饲料",
options: [],
},
{
key: "attr",
type: "checkbox",
name: "属性",
options: [],
},
],
key: "feed",
type: "checkbox",
name: "喂食饲料",
list: [],
checked: [],
},
{
key: "keyword",
name: "名称/ID",
key: "attr",
type: "checkbox",
name: "属性",
list: [],
checked: [],
},
],
buttonWidth: 0,
showCross: [],
showRecentCross: false,
};
},
computed: {
Expand Down Expand Up @@ -258,9 +271,21 @@ export default {
this.page = 1;
},
},
searchType: {
deep: true,
handler() {
const feed = this.searchType[0].checked.join(",");
const attr = this.searchType[1].checked.join(",");
this.page = 1;
this.loadData({ ...this.params, feed, attr });
},
},
},
methods: {
iconLink,
clickTabs(type) {
this.active = type;
},
loadInfoData() {
getFeeds({ client: this.client }).then((res) => {
const arr = res.data.map((item) => {
Expand All @@ -284,6 +309,7 @@ export default {
value: item.id,
};
});
this.searchType[0].list = this.feeds;
});
getAttrs({ client: this.client }).then((res) => {
const data = res.data;
Expand All @@ -294,6 +320,7 @@ export default {
};
});
this.attrs = options;
this.searchType[1].list = this.attrs;
});
},
getFeed(item) {
Expand Down Expand Up @@ -373,9 +400,9 @@ export default {
params.type = type;
this.loadList(params, type);
},
loadData() {
loadData(params = this.params) {
this.loading = true;
let params = omit(this.params, ["type"]);
params = omit(params, ["type"]);
if (this.active === "") {
const list = this.list.filter((e) => e.type !== "");
list.forEach((e) => {
Expand Down Expand Up @@ -423,24 +450,23 @@ export default {
this.appendMode = false;
});
},
checkboxChange(key) {
const value = this.checkboxData[key];
this[key] = value.join(",");
},
reset() {
this.feed = [];
this.attr = [];
},
},
mounted() {
this.showCount();
this.loadInfoData();
// const attrPro = this.getAttrList();
// const feedPro = this.getFeedList();
// const self = this;
// Promise.all([attrPro, feedPro]).then(() => {
// self.jdugeType();
// });
// window.onresize = function () {
// self.jdugeType();
// };
},
};
</script>
<style lang="less">
@import "~@/assets/css/common/tabs.less";
@import "~@/assets/css/horse/index.less";
</style>

0 comments on commit 477a354

Please sign in to comment.