Skip to content

Commit

Permalink
perf:quest style
Browse files Browse the repository at this point in the history
  • Loading branch information
@iRuxu
iRuxu committed Jan 6, 2024
1 parent 5a8961a commit 34465e0
Show file tree
Hide file tree
Showing 7 changed files with 75 additions and 36 deletions.
2 changes: 1 addition & 1 deletion src/assets/css/app.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
}

.el-tree {
background: none;
background: none !important;
}

.el-tree-node__label {
Expand Down
41 changes: 35 additions & 6 deletions src/assets/css/quest/single.less
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.m-quest-view {
padding:0 10px;
@media screen and (min-width: 768px) {
display: grid;
grid-template-columns: repeat(2, 1fr);
Expand All @@ -11,8 +12,6 @@

.w-quest {
.u-title__warpper {
padding: 5px 0;

.u-title {
display: inline-flex;
justify-content: center;
Expand Down Expand Up @@ -55,15 +54,17 @@
border-color: #ac9d84;
}

.mb(10px);
.mb(5px);
}

.u-endpoint__warpper {
border-bottom: 1px dashed #ddd;
padding-bottom: 10px;
.fz(14px);
}

.u-endpoint {
padding:2px 0;
.flex;
align-items: center;

Expand Down Expand Up @@ -101,13 +102,17 @@
.flex;
color: gray;
margin: 0.25rem 0;
padding-left: 2.3rem;
padding-left: 32px;
align-items: center;
font-size: 15px;

& > span {
margin-right: 8px;
}

.u-name.quality-1 {
color: #909399 !important;
}
}

.u-target-sub:last-of-type {
Expand All @@ -117,7 +122,8 @@

.u-desc {
white-space: pre-line;
line-height: 1.8rem;
line-height: 1.8;
font-size: 15px;
.mt(20px);
}

Expand All @@ -144,15 +150,38 @@
}

.u-reward-list {
margin-top:10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
padding-left: 30px;
.fz(14px);
}
}

.u-subtitle {
.bold;
padding: 5px 0;
padding: 3px 0;
color:#ac9d84;
border-bottom: 1px dotted lighten(#ac9d84, 20%);
.fz(13px,1.8);
margin-bottom: 12px;
}

.u-subtitle2 {
.bold;
padding: 3px 0;
color:#ac9d84;
.fz(13px,1.8);
margin-bottom: 12px;

span{
background-color:#ac9d84;
color:#fff;
padding:5px 7px;
font-weight: normal;
.fz(12px);
.r(2px);
}
}

.m-wiki-post-panel,
Expand Down
5 changes: 4 additions & 1 deletion src/assets/css/quest/single/point-filter.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
.u-point-filter {
.pointer;
display: inline-block;
margin-top: 4px;
margin-left: 4px;

img{
.w(18px);
}
}
8 changes: 7 additions & 1 deletion src/components/quest/single/notice.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="m-wiki-top">
<div class="m-wiki-top__header">
<h3 class="u-title"><i class="el-icon-news"></i>公告</h3>
<h3 class="u-title"><i class="el-icon-news"></i>特别说明</h3>
</div>
<div class="m-wiki-top__content" v-html="data"></div>
</div>
Expand Down Expand Up @@ -43,3 +43,9 @@ export default {
<style lang="less">
@import "~@/assets/css/common/notice.less";
</style>

<style scoped lang="less">
.m-wiki-top{
background-color:@bg-light;
}
</style>
9 changes: 5 additions & 4 deletions src/components/quest/single/quest-dialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="m-quest-dialog">
<template v-if="desc.AcceptRpgID && desc.AcceptRpgID.dialogues">
<div class="u-dialog">
<p class="u-subtitle">【接任务对话】</p>
<p class="u-subtitle2"><span>接任务对话</span></p>
<p
class="u-dialog-content"
v-for="(dialog, index) in desc.AcceptRpgID.dialogues"
Expand All @@ -13,7 +13,7 @@
</template>
<template v-if="desc.FinishRpgID && desc.FinishRpgID.dialogues">
<div class="u-dialog">
<p class="u-subtitle">【任务完成对话】</p>
<p class="u-subtitle2"><span>任务完成对话</span></p>
<p
class="u-dialog-content"
v-for="(dialog, index) in desc.FinishRpgID.dialogues"
Expand All @@ -24,13 +24,13 @@
</template>
<template v-if="desc.DunningDialogue">
<div class="u-dialog">
<p class="u-subtitle">【任务进行中】</p>
<p class="u-subtitle2"><span>任务进行中</span></p>
<p class="u-dialog-content" v-html="questDescFormat(desc.DunningDialogue)"></p>
</div>
</template>
<template v-if="desc.FinishedDialogue">
<div class="u-dialog">
<p class="u-subtitle">【任务完成】</p>
<p class="u-subtitle2"><span>任务完成</span></p>
<p class="u-dialog-content" v-html="questDescFormat(desc.FinishedDialogue)"></p>
</div>
</template>
Expand Down Expand Up @@ -66,6 +66,7 @@ export default {
.u-dialog-content {
padding: 5px 0;
padding-left: 16px;
font-size: 15px;
}
.u-dialog-name {
color: #8a6d3b;
Expand Down
38 changes: 19 additions & 19 deletions src/views/quest/quest.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,28 @@
</template>
<div class="m-search-wrap">
<Search :placeholder="placeholder" @search="search">
<el-tooltip content="查看任务链需要键入完整任务名或任务ID哦" placement="top">
<el-checkbox v-model="chain">查看任务链</el-checkbox>
</el-tooltip>
</Search>
<el-tooltip class="u-tips" effect="dark" placement="bottom">
<div slot="content">
<span>※ 支持任务名称精确或模糊搜索</span> <br />
<span>※ 支持任务相关物品名称精确搜索</span> <br />
<span>※ 支持成就名称精确搜索</span> <br />
<div>
<el-tooltip content="查看任务链需要键入完整任务名或任务ID哦" placement="top">
<el-checkbox v-model="chain">查看任务链</el-checkbox>
</el-tooltip>
<el-tooltip class="u-tips" effect="dark" placement="bottom">
<div slot="content">
<span>※ 支持任务名称精确或模糊搜索</span> <br />
<span>※ 支持任务相关物品名称精确搜索</span> <br />
<span>※ 支持成就名称精确搜索</span> <br />
</div>
<el-button type="text" icon="el-icon-question"></el-button>
</el-tooltip>
</div>
<el-button type="text" icon="el-icon-question"></el-button>
</el-tooltip>
</Search>
<el-popover popper-class="u-player-setting-popover" placement="top" width="160" v-model="settingVisible">
<el-input v-model="playerName" placeholder="称呼" @input="handlePlayerInfoChange"></el-input>
<el-input v-model="playerBody" placeholder="体型" @input="handlePlayerInfoChange"></el-input>
<el-input v-model="playerName" placeholder="称呼" @input="handlePlayerInfoChange" size="mini"><template #prepend>称呼</template></el-input>
<el-input v-model="playerBody" placeholder="体型" @input="handlePlayerInfoChange" size="mini"><template #prepend>体型</template></el-input>
<div style="text-align: right; margin: 0">
<el-button type="primary" size="mini" @click="settingVisible = false">确定</el-button>
</div>
<div class="u-player" slot="reference">
<span class="u-player-name">{{ playerName }} </span>
<span class="u-player-name">{{ playerName }}</span>|
<span class="u-player-body">{{ playerBody }}</span>
<el-button type="text" icon="el-icon-setting"></el-button>
</div>
Expand Down Expand Up @@ -83,11 +85,11 @@ export default {
};
</script>
<style lang="less">
@import "~@/assets/css/app.less";
.m-search-wrap {
.flex;
width: 100%;
align-items: center;
.mb(16px);
@media screen and (min-width: 768px) {
.el-input-group__append {
Expand All @@ -110,21 +112,19 @@ export default {
}
.u-player {
.flex;
padding: 0 12px;
padding: 0 12px 10px 12px;
align-items: center;
.fz(14px, 1.5);
.u-player-name,
.u-player-body {
.mt(-4px);
.mr(6px);
}
.el-button {
.ml(2px);
}
}
.u-tips {
.ml(8px);
margin:0 0 0 8px !important;
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/views/quest/single.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
</p>
</div>
<div class="u-target" v-show="targetDesc">
<p class="u-subtitle">【任务目标】</p>
<p class="u-subtitle">▶ 任务目标</p>
<p v-html="targetDesc"></p>
<template v-if="quest.killNpcs && quest.killNpcs.length > 0">
<div class="u-target-sub" v-for="(killNpc, i) in quest.killNpcs" :key="i">
Expand Down Expand Up @@ -102,11 +102,11 @@
</div>
</div>
<div class="u-desc" v-show="questDesc">
<p class="u-subtitle">【任务描述】</p>
<p class="u-subtitle">▶ 任务描述</p>
<p v-html="questDesc"></p>
</div>
<div class="u-offer" v-if="quest.offerItems">
<p class="u-subtitle">【提供物品】</p>
<p class="u-subtitle">▶ 提供物品</p>
<div class="u-offer-list">
<item-icon
v-for="item in quest.offerItems"
Expand All @@ -117,7 +117,7 @@
</div>
</div>
<div class="u-reward" v-show="showReward">
<p class="u-subtitle">【任务奖励】</p>
<p class="u-subtitle">▶ 任务奖励</p>
<div class="u-reward-list">
<reward-item v-for="(reward, i) in quest.rewards" :key="i" :reward="reward"></reward-item>
</div>
Expand Down

0 comments on commit 34465e0

Please sign in to comment.