Skip to content

M
million
Commit 2d960e6a authored by 罗超's avatar 罗超
Browse files
Options

完成首页组件

parent e834bab2
Hide whitespace changes
Inline Side-by-side
Showing with 279 additions and 3 deletions
quasar.conf.js
View file @ 2d960e6a
......@@ -137,7 +137,12 @@ module.exports = function( /* ctx */ ) {
'QImg',
'QResizeObserver',
'QMarkupTable',
'QForm'
'QForm',
'QTable',
'QTh',
'QTr',
'QTd',
'QCard'
],
directives: [
......
src/App.vue
View file @ 2d960e6a
......@@ -10,7 +10,7 @@ export default {
};
</script>
<style>
@import url("//at.alicdn.com/t/font_1890699_yf7nftejbw.css");
@import url("//at.alicdn.com/t/font_1890699_863y2y4jxon.css");
@font-face {
font-family: "oswald";
src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
......
src/components/other/travel-list.vue 0 → 100644
View file @ 2d960e6a
<template>
<div class="q-mt-lg q-mb-lg">
<div class="section-block download1">
<div class="group-title">9月歐洲遊</div>
<q-table
:pagination.sync="paginationDesktop"
:data="data"
:columns="columns"
row-key="id"
:filter="filter"
table-header-class="travel-list"
card-class="travel-list"
:pagination-label="formatLabel"
rows-per-page-label=" "
:rows-per-page-options="[]"
no-data-labe="沒有找到適合的團期"
v-if="!$q.screen.xs"
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="travelDate" :props="props">
<span class="text-red">{{ props.row.travelDate }}</span>
</q-td>
<q-td key="no" :props="props">{{ props.row.no }}</q-td>
<q-td key="name" :props="props">
<div style="max-width:435px;white-space: pre-wrap;">
<a href target="_blank">{{ props.row.name }}</a>
</div>
</q-td>
<q-td key="days" :props="props">{{ props.row.days }}</q-td>
<q-td key="flight" :props="props">
<q-icon color="grey" name="iconfont iconhangbanxinxicopy" size="14" />
</q-td>
<q-td key="price" :props="props">
<span caption>$</span>
<span class="text-subtitle2 text-weight-medium">{{ props.row.price }}</span>
</q-td>
<q-td key="site" :props="props">
<span
:class="{'text-orange':props.row.site>0,'text-pink':(props.row.site==0 && props.row.substitute),'text-red':(props.row.site==0 && !props.row.substitute)}"
>{{ props.row.site>0?'有名額':(props.row.site==0 && props.row.substitute?'可候補':'名額已滿') }}</span>
</q-td>
<q-td key="id" :props="props">
<q-btn
type="a"
href="/start/pick-quasar-flavour"
target="_blank"
:label="props.row.site>0||props.row.substitute?'我有興趣':'無法預訂'"
:color="props.row.site>0||props.row.substitute?'indigo':'grey'"
rounded
unelevated
:disable="props.row.site==0&&props.row.substitute"
/>
</q-td>
</q-tr>
</template>
</q-table>
<q-table
:pagination.sync="pagination"
v-if="$q.screen.xs"
grid
:data="data"
:columns="columns"
row-key="id"
:filter="filter"
table-header-class="travel-list"
card-class="travel-list"
:pagination-label="formatLabel"
rows-per-page-label=" "
:rows-per-page-options="[]"
no-data-labe="沒有找到適合的團期"
>
<template v-slot:item="props">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition">
<q-card class="q-mb-md q-pt-xs q-pb-xs" flat>
<q-list>
<q-item>
<q-item-section>
<q-item-label class="text-grey">團期</q-item-label>
<q-item-label class="text-red">{{props.row.travelDate}}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey">團號</q-item-label>
<q-item-label>{{props.row.no}}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey">團體名稱</q-item-label>
<q-item-label lines="2">
<a href target="_blank">{{ props.row.name }}</a>
</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey">天數</q-item-label>
<q-item-label>{{props.row.days}}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey">航班</q-item-label>
<q-item-label>
<q-icon color="grey" name="iconfont iconhangbanxinxicopy" size="14" />
</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey">售價</q-item-label>
<q-item-label>
<span caption>$</span>
<span class="text-subtitle2 text-weight-medium">{{ props.row.price }}</span>
<span>起</span>
</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey">狀態</q-item-label>
<q-item-label>
<span
:class="{'text-orange':props.row.site>0,'text-pink':(props.row.site==0 && props.row.substitute),'text-red':(props.row.site==0 && !props.row.substitute)}"
>{{ props.row.site>0?'有名額':(props.row.site==0 && props.row.substitute?'可候補':'名額已滿') }}</span>
</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-btn
type="a"
href="/start/pick-quasar-flavour"
target="_blank"
:label="props.row.site>0||props.row.substitute?'我有興趣':'無法預訂'"
:color="props.row.site>0||props.row.substitute?'indigo':'grey'"
rounded
unelevated
:disable="props.row.site==0&&props.row.substitute"
/>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</q-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pagination: {
sortBy: "id",
descending: false,
page: 1,
rowsPerPage: 1
},
paginationDesktop: {
sortBy: "id",
descending: false,
page: 1,
rowsPerPage: 5
},
filter: "",
columns: [
{
name: "travelDate",
required: true,
label: "出發日期",
align: "left",
sortable: true
},
{
name: "no",
align: "center",
label: "團號",
field: "no"
},
{ name: "name", label: "團體名稱", align: "left", field: "name" },
{ name: "days", label: "天數", align: "left", field: "days" },
{ name: "flight", label: "航班", align: "left", field: "flight" },
{ name: "price", label: "售價", align: "left", field: "price" },
{ name: "site", label: "狀態", align: "left", field: "site" },
{ name: "id", label: "報名", align: "left", field: "id" }
],
data: [
{
id: 1,
travelDate: "2021-01-01",
no: "EUR2021011",
name:
"魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城8日",
days: 11,
price: 10500.0,
site: 5,
substitute: true
},
{
id: 2,
travelDate: "2021-01-05",
no: "EUR2021012",
name:
"魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城8日",
days: 11,
price: 14999.0,
site: 5,
substitute: true
},
{
id: 3,
travelDate: "2021-01-21",
no: "EUR2021013",
name: "魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村8日",
days: 11,
price: 15500.0,
site: 5,
substitute: true
},
{
id: 4,
travelDate: "2021-01-30",
no: "EUR2021014",
name:
"魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城、無敵海上美景8日",
days: 11,
price: 12500.0,
site: 5,
substitute: true
}
]
};
},
methods: {
formatLabel(firstRowIndex, endRowIndex, totalRowsNumber) {
return "";
}
}
};
</script>
<style>
.my-th-head {
font-size: 18px !important;
font-weight: 600 !important;
}
.download1 .group-title {
margin: 0;
padding: 0;
line-height: unset;
margin-bottom: 20px;
font-size: 24px;
text-align: center;
font-weight: 600;
text-align: center;
}
.travel-list th {
font-size: 16px !important;
}
.travel-list td {
font-size: 14px !important;
}
</style>
\ No newline at end of file
src/pages/Index.vue
View file @ 2d960e6a
......@@ -13,6 +13,7 @@
<head-style11 v-if="styleType==11"></head-style11>
<video-one></video-one>
<!-- <video-two></video-two> -->
<travel-list></travel-list>
<diy-img-one></diy-img-one>
<diy-img-two></diy-img-two>
<diy-title></diy-title>
......@@ -88,6 +89,7 @@ import diyTitle from "../components/other/diy-title";
import paragraph from "../components/other/paragraph";
import photo from "../components/other/photo";
import diyForm from "../components/other/diy-form";
import travelList from "../components/other/travel-list";
export default {
name: "PageIndex",
components: {
......@@ -132,7 +134,8 @@ export default {
diyTitle,
paragraph,
photo,
diyForm
diyForm,
travelList
},
data() {
return {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment