Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
A
Athena
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
华国豪
Athena
Commits
07e5230e
Commit
07e5230e
authored
Jul 11, 2019
by
huangyuanyuan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update
parent
b31b67b3
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
782 additions
and
0 deletions
+782
-0
gou.png
src/assets/img/active/gou.png
+0
-0
hb.png
src/assets/img/active/hb.png
+0
-0
search111.vue
src/components/mall/search111.vue
+485
-0
RedEnvelopes.vue
src/components/newPersonalCenter/integral/RedEnvelopes.vue
+297
-0
No files found.
src/assets/img/active/gou.png
0 → 100644
View file @
07e5230e
502 Bytes
src/assets/img/active/hb.png
0 → 100644
View file @
07e5230e
945 Bytes
src/components/mall/search111.vue
0 → 100644
View file @
07e5230e
<
style
>
@import
'../../assets/mall/search.css'
;
</
style
>
<
template
>
<div
class=
"search-page-box"
>
<el-row
>
<el-col
:span=
"20"
:offset=
"2"
class=
"topic"
>
<el-col
:span=
'12'
>
<div
class=
"chosend-box"
>
你的选择:
<el-tag
closable
hit
size=
'medium'
v-for=
'(item,index) in searchItem'
:key=
"index"
v-if=
'item!==""&&item!=="0"'
@
close=
'handleClose(index)'
>
{{
item
}}
</el-tag>
</div>
</el-col>
<el-col
:span=
'12'
>
<div
class=
"second-s-box"
>
<el-col
:span=
"4"
>
<el-select
v-model=
"type"
placeholder=
"请选择"
size=
"mini"
>
<el-option
label=
"跟团游"
value=
"1"
></el-option>
</el-select>
</el-col>
<el-col
:span=
"16"
>
<input
type=
"text"
class=
"search-input"
v-model=
"keywords"
max-length=
"50"
@
keyup
.
enter=
"loadTeamDataInit"
/>
</el-col>
<el-col
:span=
"4"
>
<el-button
type=
"danger"
size=
"medium"
@
click=
"loadTeamDataInit"
>
<i
class=
"el-icon-search"
></i>
</el-button>
</el-col>
</div>
</el-col>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"20"
:offset=
"2"
>
<div
class=
"searchitem"
>
<div
class=
"itme"
v-if=
"(searchItem[0]==='' || searchItem[0]==='0') && lines.length>0"
>
<el-col
:span=
"3"
class=
"item-title"
>
线路
</el-col>
<el-col
:span=
"21"
class=
"items"
>
<el-tabs
v-model=
"searchItem[0]"
@
tab-click=
"changeXilie"
>
<el-tab-pane
v-for=
'item in lines'
:key=
"item.id"
:label=
"item.name"
:name=
"item.name"
></el-tab-pane>
</el-tabs>
</el-col>
</div>
<div
class=
"itme"
v-if=
"(searchItem[1]==='' || searchItem[1]==='0')&&xilies.length>0"
>
<el-col
:span=
"3"
class=
"item-title"
>
系列
</el-col>
<el-col
:span=
"21"
class=
"items"
>
<el-tabs
v-model=
"searchItem[1]"
@
tab-click=
'loadTeamDataInit'
>
<el-tab-pane
v-for=
'item in xilies'
:key=
"item.id"
:label=
"item.name"
:name=
"item.name"
></el-tab-pane>
</el-tabs>
</el-col>
</div>
<div
class=
"itme"
v-if=
"(searchItem[2]==='' || searchItem[2]==='0') && (searchItem[5]==='' || searchItem[5]==='0')"
>
<el-col
:span=
"3"
class=
"item-title"
>
出发日期
</el-col>
<el-col
:span=
"6"
class=
"items"
>
<el-tabs
v-model=
"searchItem[2]"
@
tab-click=
'loadTeamDataInit'
>
<el-tab-pane
v-for=
'(item,index) in dates'
:key=
"index"
:label=
"item"
:name=
"item"
></el-tab-pane>
</el-tabs>
</el-col>
<el-col
:span=
"15"
>
<el-date-picker
size=
"mini"
value-format=
'yy-MM-dd'
v-model=
"multData"
type=
"daterange"
range-separator=
"至"
start-placeholder=
"最早出发"
end-placeholder=
"最晚出发"
@
change=
'multDataChange'
>
</el-date-picker>
</el-col>
</div>
<div
class=
"itme"
v-if=
"searchItem[3]==='' || searchItem[3]==='0'"
>
<el-col
:span=
"3"
class=
"item-title"
>
出发城市
</el-col>
<el-col
:span=
"21"
class=
"items"
>
<el-tabs
v-model=
"searchItem[3]"
@
tab-click=
'loadTeamDataInit'
>
<el-tab-pane
v-for=
'item in startCitys'
:key=
"item.id"
:label=
"item.startCityName"
:name=
"item.startCityName"
></el-tab-pane>
</el-tabs>
</el-col>
</div>
<div
class=
"itme"
v-if=
"searchItem[4]==='' || searchItem[4]==='0'"
>
<el-col
:span=
"3"
class=
"item-title"
>
行程天数
</el-col>
<el-col
:span=
"21"
class=
"items"
>
<el-tabs
v-model=
"searchItem[4]"
@
tab-click=
'loadTeamDataInit'
>
<el-tab-pane
v-for=
'(item,index) in dayCount'
:key=
"index"
:label=
"item.format"
:name=
"item.format"
></el-tab-pane>
</el-tabs>
</el-col>
</div>
</div>
<div
class=
"orderbyitem"
>
<el-button-group
class=
"orderby-group"
>
<el-button
size=
'mini'
:type=
"orderindex==0?'danger':''"
@
click=
"changeOrderType(0)"
>
综合
</el-button>
<el-button
size=
'mini'
:type=
"orderindex==1?'danger':''"
@
click=
"changeOrderType(1)"
>
团期
<i
:class=
"ordertype==0||orderindex!=1?'el-icon-arrow-down':'el-icon-arrow-up'"
></i></el-button>
<el-button
size=
'mini'
:type=
"orderindex==2?'danger':''"
@
click=
"changeOrderType(2)"
>
价格
<i
:class=
"ordertype==0||orderindex!=2?'el-icon-arrow-down':'el-icon-arrow-up'"
></i></el-button>
<el-button
size=
'mini'
:type=
"orderindex==3?'danger':''"
@
click=
"changeOrderType(3)"
>
销量
<i
:class=
"ordertype==0||orderindex!=3?'el-icon-arrow-down':'el-icon-arrow-up'"
></i></el-button>
<el-button
size=
'mini'
:type=
"orderindex==4?'danger':''"
@
click=
"changeOrderType(4)"
>
评论数
<i
:class=
"ordertype==0||orderindex!=4?'el-icon-arrow-down':'el-icon-arrow-up'"
></i></el-button>
</el-button-group>
<div
class=
"pirce"
>
<span>
价格区间
</span>
<el-input
size=
"mini"
v-model=
"minPrice"
@
keyup
.
native=
"proving"
@
keyup
.
enter=
'loadTeamDataInit'
maxlength=
'6'
></el-input>
<strong>
~
</strong>
<el-input
size=
"mini"
v-model=
"maxPrice"
@
keyup
.
native=
"proving"
@
keyup
.
enter=
'loadTeamDataInit'
maxlength=
'6'
></el-input>
<el-button
size=
'mini'
@
click=
"loadTeamDataInit"
>
确认
</el-button>
</div>
</div>
<!-- 列表 -->
<div
class=
"teams"
v-loading=
'isLoading'
>
<div
class=
"teams-item"
v-for=
"(item,index) in teamDatas"
@
mouseover=
'hoverIndex=index'
@
mouseout=
"hoverIndex=-1"
>
<div
class=
"picbox"
>
<div
class=
"daynum"
>
{{
item
.
dayNum
}}
天
</div>
<el-carousel
:interval=
"3000"
:autoplay=
'hoverIndex==index'
arrow=
"never"
height=
"148"
:style=
"
{'background':'#ddd'}" v-if='item.imgCover!=""'>
<el-carousel-item
v-for=
"(img,imgIndex) in JSON.parse(item.imgCover)"
:key=
"imgIndex"
v-if=
'img.Url!=""'
>
<img
v-lazy=
'compressImg(img.Url, "filt", 200, 148)'
@
click=
"goUrl('detail',item.id,item.tcid)"
>
<!--
<img
v-lazy=
'`$
{img.Url}?x-oss-process=image/resize,m_fill,h_148,w_200`' @click="goUrl('detail',item.id,item.tcid)"> -->
</el-carousel-item>
</el-carousel>
<img
v-else
style=
"height:100%;width:100%"
src=
'../../assets/img/banner@3x.png'
/>
</div>
<div
class=
"contentbox"
>
<div
class=
"title"
@
click=
"goUrl('detail',item.id,item.tcid)"
>
{{
item
.
title
}}
</div>
<div
class=
"item-info"
>
<span>
<i
class=
"iconfont icon-bb-chufadi"
></i>
出发地:
{{
item
.
startCityName
?
item
.
startCityName
:
'成都'
}}
</span>
<span>
<i
class=
"iconfont icon-bb-tuanqi"
></i>
最近团期:
{{
item
.
startDate
}}
</span>
<span>
<i
class=
"iconfont icon-bb-yuwei"
></i>
余位:
{{
item
.
surplus
>
10
?
"充足"
:
`仅于${item.surplus
}
席`
}}
<
/span
>
<!--
<
span
class
=
"down"
>
<
i
class
=
"iconfont icon-bb-xiazai"
><
/i>下载行
程
<
/span> --
>
<
/div
>
<
div
class
=
"item-tag"
>
<
el
-
tag
type
=
"danger"
>
{{
item
.
ltName
}}
<
/el-tag
>
<!--
<
el
-
tag
type
=
"success"
>
早鸟立减
<
/el-tag> --
>
<
/div
>
<
div
class
=
"item-info"
>
<
span
>
<
i
class
=
"iconfont icon-bb-rili"
><
/i
>
<
div
style
=
"display:inline"
v
-
for
=
"(t,i) in item.dateArr"
:
key
=
"i"
>
{{
t
}}
<
/div
>
<
/span
>
<
/div
>
<
/div
>
<
div
class
=
"operabox"
>
<
div
class
=
"huodong"
:
style
=
"{'visibility':`${item.discountPrice>0?'visible':'hidden'
}
`
}
"
>
<
span
>
早鸟优惠
<
/span
>
<
span
>
立减
{{
item
.
discountPrice
}}
<
/span
>
<
/div
>
<
div
class
=
"price"
>
¥
{{
isLogin
!==
1
?
item
.
b2CPrice
:
item
.
b2BPrice
}}
<
span
>
起
<
/span
>
<
/div
>
<
el
-
button
size
=
'mini'
@
click
=
"goUrl('detail',item.id,item.tcid)"
>
立即预订
<
/el-button
>
<
/div
>
<
/div
>
<
div
class
=
"item-pager"
v
-
if
=
'teamDatas.length>0'
>
<
el
-
pagination
background
layout
=
"prev, pager, next, jumper"
:
total
=
"totalCount"
:
page
-
size
=
'pageSize'
@
current
-
change
=
'handleCurrentChange'
>
<
/el-pagination
>
<
/div
>
<
div
class
=
"empty-data"
v
-
else
>
<
i
class
=
"iconfont icon-kong"
><
/i
>
很抱歉,你想要的信息我们真的找不到了
<
/div
>
<
/div
>
<
/el-col
>
<
/el-row
>
<
/div
>
<
/template
>
<
script
>
import
moment
from
'moment'
export
default
{
data
()
{
return
{
type
:
'1'
,
lineChosen
:
''
,
searchItem
:[],
keywords
:
''
,
lines
:[],
xilies
:[],
dates
:[],
multData
:[],
dayCount
:[],
startCitys
:[],
minPrice
:
''
,
maxPrice
:
''
,
orderindex
:
1
,
ordertype
:
0
,
hoverIndex
:
-
1
,
pageSize
:
20
,
pageIndex
:
1
,
teamDatas
:[],
totalCount
:
0
,
isLoading
:
false
,
isLogin
:
1
,
cityId
:
262
,
companyId
:
0
,
}
}
,
created
(){
this
.
getAction
(
8
);
this
.
cityId
=
localStorage
.
cityId
;
this
.
companyId
=
parseInt
(
localStorage
.
site
);
}
,
mounted
()
{
this
.
isLogin
=
this
.
$store
.
state
.
isLogin
;
this
.
companyId
=
parseInt
(
localStorage
.
site
)
this
.
searchItem
.
push
(
''
)
this
.
searchItem
.
push
(
''
)
this
.
searchItem
.
push
(
''
)
this
.
searchItem
.
push
(
''
)
this
.
searchItem
.
push
(
''
)
this
.
searchItem
.
push
(
''
)
this
.
keywords
=
decodeURIComponent
(
this
.
$route
.
query
.
keywords
)
this
.
loadRecoItems
()
this
.
loadDates
()
this
.
loadDayCount
()
}
,
props
:[
'changeCity'
],
watch
:{
changeCity
:
{
handler
:
function
(
val
,
oldVal
)
{
if
(
val
){
this
.
cityId
=
localStorage
.
cityId
;
this
.
companyId
=
parseInt
(
localStorage
.
site
);
this
.
loadTeamData
();
this
.
loadRecoItems
();
}
}
,
deep
:
true
}
,
}
,
methods
:
{
goUrl
(
path
,
id
,
tcid
){
// detailTwo
path
=
'detailTwo'
path
=
`${path
}
/${encodeURIComponent(id)
}
/`
+
tcid
this
.
$router
.
push
({
path
}
)
}
,
proving
(){
this
.
minPrice
=
this
.
minPrice
.
replace
(
/
[^\.\d]
/g
,
''
)
this
.
minPrice
=
this
.
minPrice
.
replace
(
'.'
,
''
)
this
.
maxPrice
=
this
.
maxPrice
.
replace
(
/
[^\.\d]
/g
,
''
)
this
.
maxPrice
=
this
.
maxPrice
.
replace
(
'.'
,
''
)
}
,
handleCurrentChange
(
val
)
{
this
.
isLoading
=
true
this
.
pageIndex
=
parseInt
(
val
)
this
.
loadTeamData
()
}
,
loadTeamData
(){
// if(this.keywords=='')
{
// this.Info('请输入搜索关键字')
// return
//
}
let
lineId
=
0
,
lineTeamId
=
0
,
minTripDay
=-
1
,
maxTripDay
=-
1
,
minPrice
=-
1
,
maxPrice
=-
1
,
startDate
=
''
,
endDate
=
''
,
startCityId
=
0
let
search0
=
""
;
let
search1
=
""
;
if
(
this
.
searchItem
[
0
]
!=
''
&&
this
.
searchItem
[
0
]
!=
'0'
)
{
this
.
lines
.
forEach
(
x
=>
{
if
(
x
.
name
==
this
.
searchItem
[
0
]){
lineId
=
x
.
id
;
search0
=
x
.
name
;
}
}
)
console
.
log
(
"search0"
,
search0
)
this
.
searchItem
[
0
]
=
search0
;
}
if
(
this
.
searchItem
[
1
]
!=
''
&&
this
.
searchItem
[
1
]
!=
'0'
)
{
this
.
xilies
.
forEach
(
x
=>
{
if
(
x
.
name
==
this
.
searchItem
[
1
]){
lineTeamId
=
x
.
id
;
search1
=
x
.
name
;
}
}
)
this
.
searchItem
[
1
]
=
search1
;
}
if
(
this
.
searchItem
[
4
]
!=
''
&&
this
.
searchItem
[
4
]
!=
'0'
){
this
.
dayCount
.
forEach
(
x
=>
{
if
(
x
.
format
==
this
.
searchItem
[
4
]){
minTripDay
=
x
.
min
maxTripDay
=
x
.
max
}
}
)
}
if
(
this
.
searchItem
[
2
]
!=
''
&&
this
.
searchItem
[
2
]
!=
'0'
)
{
let
i
=
this
.
dates
.
indexOf
(
this
.
searchItem
[
2
])
let
m
=
new
Date
().
getMonth
()
+
1
let
y
=
new
Date
().
getFullYear
()
m
+=
i
if
(
m
>
12
){
m
=
m
-
12
y
+=
1
}
startDate
=
`${y
}
-${m>9?m:'0'+m
}
-01`
endDate
=
`${y
}
-${m>9?m:'0'+m
}
-${new Date(y,m,0).getDate()
}
`
}
else
if
(
this
.
searchItem
[
5
]
!=
''
&&
this
.
searchItem
[
5
]
!=
'0'
)
{
startDate
=
`20${multData[0]
}
`
endDate
=
`20${multData[1]
}
`
}
if
(
this
.
minPrice
!=
''
){
minPrice
=
parseFloat
(
this
.
minPrice
)
}
if
(
this
.
maxPrice
!=
''
){
maxPrice
=
parseFloat
(
this
.
maxPrice
)
if
(
minPrice
>
maxPrice
){
this
.
Error
(
'价格区间的最低价格不能低于最大价格'
)
this
.
isLoading
=
false
return
false
}
}
if
(
this
.
searchItem
[
3
]
!=
''
&&
this
.
searchItem
[
3
]
!=
'0'
)
{
this
.
startCitys
.
forEach
(
x
=>
{
if
(
x
.
startCityName
==
this
.
searchItem
[
3
]){
startCityId
=
x
.
id
}
}
)
}
//startCitys
//
{
// "id":1,
// "name":"同业会员价"
//
}
,
//
{
// "id":2,
// "name":"同业价格"
//
}
,
//
{
// "id":3,
// "name":"直客会员价"
//
}
,
//
{
// "id":4,
// "name":"直客价格"
//
}
let
msg
=
{
pageIndex
:
this
.
pageIndex
,
pageSize
:
this
.
pageSize
,
searchKey
:
this
.
keywords
,
cityId
:
this
.
cityId
,
lineId
,
lineTeamId
,
minTripDay
,
maxTripDay
,
minPrice
,
maxPrice
,
startDate
,
endDate
,
orderByDate
:
this
.
orderindex
==
1
?(
this
.
ordertype
==
0
?
2
:
1
):
0
,
orderByPrice
:
this
.
orderindex
==
2
?(
this
.
ordertype
==
0
?
2
:
1
):
0
,
priceOrderByField
:
4
,
companyId
:
this
.
companyId
,
orderBySales
:
this
.
orderindex
==
3
?(
this
.
ordertype
==
0
?
2
:
1
):
0
,
startCityId
}
this
.
isLogin
=
this
.
$store
.
state
.
isLogin
;
if
(
this
.
isLogin
==
1
){
msg
.
priceOrderByField
=
2
;
}
else
{
msg
.
priceOrderByField
=
4
;
}
let
cmd
=
'b2b_get_GetB2BTravelPageList'
this
.
apipost
(
cmd
,
msg
,
r
=>
{
this
.
teamDatas
=
r
.
data
.
data
.
pageData
this
.
totalCount
=
r
.
data
.
data
.
pageCount
this
.
isLoading
=
false
this
.
teamDatas
.
forEach
(
x
=>
{
x
.
dateArr
=
[]
x
.
startDates
.
split
(
','
).
forEach
(
y
=>
{
x
.
dateArr
.
push
(
moment
(
y
).
format
(
'MM-DD'
))
}
)
}
)
}
,
null
)
}
,
changeOrderType
(
i
){
if
(
this
.
orderindex
==
i
){
this
.
ordertype
=
this
.
ordertype
==
0
?
1
:
0
}
else
{
this
.
orderindex
=
i
this
.
ordertype
=
0
}
this
.
loadTeamDataInit
()
}
,
loadDayCount
(){
this
.
dayCount
.
push
({
min
:
1
,
max
:
1
,
format
:
'1天'
}
)
this
.
dayCount
.
push
({
min
:
2
,
max
:
2
,
format
:
'2天'
}
)
this
.
dayCount
.
push
({
min
:
3
,
max
:
3
,
format
:
'3天'
}
)
this
.
dayCount
.
push
({
min
:
4
,
max
:
4
,
format
:
'4天'
}
)
this
.
dayCount
.
push
({
min
:
5
,
max
:
5
,
format
:
'5天'
}
)
this
.
dayCount
.
push
({
min
:
6
,
max
:
6
,
format
:
'6天'
}
)
this
.
dayCount
.
push
({
min
:
7
,
max
:
8
,
format
:
'7-8天'
}
)
this
.
dayCount
.
push
({
min
:
9
,
max
:
10
,
format
:
'9-10天'
}
)
this
.
dayCount
.
push
({
min
:
10
,
max
:
null
,
format
:
'10天以上'
}
)
}
,
multDataChange
(){
let
t
=
''
if
(
this
.
multData
.
length
==
2
){
this
.
multData
.
forEach
((
x
,
index
)
=>
{
t
+=
x
t
+=
index
>
0
?
''
:
'至'
}
)
this
.
$set
(
this
.
searchItem
,
5
,
t
)
this
.
loadTeamDataInit
()
}
else
{
this
.
$set
(
this
.
searchItem
,
5
,
t
)
}
}
,
loadDates
(){
let
d
=
new
Date
().
getMonth
()
for
(
let
i
=
0
;
i
<
3
;
i
++
){
d
++
d
=
d
>
12
?
d
-
12
:
d
this
.
dates
.
push
(
`${d
}
月`
)
}
}
,
changeXilie
(
tab
,
event
){
this
.
xilies
=
[]
if
(
this
.
searchItem
[
0
]
===
''
||
this
.
searchItem
[
0
]
===
'0'
){
this
.
$set
(
this
.
searchItem
,
1
,
''
)
}
else
{
this
.
loadTeamDataInit
()
this
.
lines
.
forEach
(
x
=>
{
if
(
this
.
searchItem
[
0
]
===
x
.
name
){
this
.
xilies
=
x
.
lineTeam
}
}
)
}
}
,
loadTeamDataInit
(){
this
.
isLoading
=
true
this
.
pageIndex
=
1
this
.
loadTeamData
()
}
,
// 系列
loadRecoItems
(){
if
(
this
.
companyId
!=-
1
){
this
.
apipost
(
'b2b_get_GetGroupSearchItem'
,{
'companyId'
:
this
.
companyId
,
cityId
:
this
.
cityId
}
,
r
=>
{
this
.
lines
=
r
.
data
.
data
.
line
console
.
log
(
"this.lines"
,
this
.
lines
)
if
(
this
.
$route
.
query
.
lineId
&&
this
.
$route
.
query
.
lineteamId
){
this
.
searchItem
[
0
]
=
this
.
$route
.
query
.
lineId
this
.
searchItem
[
1
]
=
this
.
$route
.
query
.
lineteamId
this
.
loadTeamDataInit
()
this
.
changeXilie
()
}
else
if
(
this
.
$route
.
query
.
lineId
){
this
.
searchItem
[
0
]
=
this
.
$route
.
query
.
lineId
this
.
changeXilie
()
}
else
if
(
this
.
$route
.
query
.
startCityId
){
this
.
searchItem
[
3
]
=
this
.
$route
.
query
.
startCityId
;
this
.
loadTeamDataInit
()
}
else
{
this
.
loadTeamDataInit
()
}
this
.
startCitys
=
r
.
data
.
data
.
startCity
}
,
null
)
}
}
,
handleClose
(
i
)
{
this
.
$set
(
this
.
searchItem
,
i
,
''
)
if
(
i
==
0
){
this
.
xilies
=
[]
this
.
$set
(
this
.
searchItem
,
1
,
''
)
}
else
if
(
i
==
5
){
this
.
multData
=
[]
}
this
.
loadTeamDataInit
()
}
}
}
<
/script
>
src/components/newPersonalCenter/integral/RedEnvelopes.vue
0 → 100644
View file @
07e5230e
<
template
>
<div
id=
"Red"
class=
"commonF"
>
<div
class=
"banner"
>
<div
class=
"bannerContent"
>
<div
class=
"myRedBag"
>
我的大红包
</div>
<el-row>
<el-col
:span=
"6"
>
<img
style=
"width:156px;height:150px;"
src=
"../../../assets/img/activy.jpg"
alt=
""
>
</el-col>
<el-col
:span=
"12"
>
<p
style=
"color:#FFFFFF;margin-top:40px"
>
可用红包余额
</p>
<p
style=
"color:#FFFFFF"
>
<span
class=
"f26"
>
¥
</span>
<span
class=
"f40 pfR"
>
12012
</span>
<span
class=
"f12"
style=
"margin-left:40px"
>
使用规则
</span>
</p>
</el-col>
<el-col
:span=
"6"
style=
"text-align:right"
>
<div
class=
"ckBtn"
>
查看明细
</div>
</el-col>
</el-row>
</div>
</div>
<div
class=
"jyeDiv"
>
<p>
当前交易额:¥
<span
class=
"f30 pfR"
>
124565456
</span></p>
<div
class=
"jyItem"
>
<el-row>
<el-col
:span=
"15"
style=
"position:relative;margin-top:15px"
>
<div
class=
"progress progress1"
>
<span></span>
</div>
</el-col>
<el-col
:span=
"2"
style=
"text-align:center;margin-top:15px"
>
<img
style=
"width:20px;height:20px"
src=
"../../../assets/img/active/gou.png"
alt=
""
>
</el-col>
<el-col
:span=
"6"
>
<p
style=
"color:#00B526"
class=
"pfR"
>
已激活,预计收益 ¥360
</p>
<p
style=
"color:#999999"
>
月交易额已达
<span
class=
"pfR"
>
¥1000
</span><span>
返
</span><span
class=
"pfR"
>
2%
</span></p>
</el-col>
</el-row>
</div>
<div
class=
"jyItem"
>
<el-row>
<el-col
:span=
"15"
style=
"position:relative;margin-top:15px"
>
<div
class=
"progress progress2"
>
<span></span>
</div>
</el-col>
<el-col
:span=
"2"
style=
"text-align:center;margin-top:15px"
>
<img
style=
"width:20px;height:20px"
src=
"../../../assets/img/active/gou.png"
alt=
""
>
</el-col>
<el-col
:span=
"6"
>
<p
style=
"color:#EE4454"
class=
"pfR"
>
已激活,预计收益 ¥360
</p>
<p
style=
"color:#999999"
>
月交易额已达
<span
class=
"pfR"
>
¥1000
</span><span>
返
</span><span
class=
"pfR"
>
2%
</span></p>
</el-col>
</el-row>
</div>
<div
class=
"jyItem"
>
<el-row>
<el-col
:span=
"15"
style=
"position:relative;margin-top:15px"
>
<div
class=
"progress progress3"
>
<span></span>
</div>
</el-col>
<el-col
:span=
"2"
style=
"text-align:center;margin-top:15px"
>
<img
style=
"width:20px;height:20px"
src=
"../../../assets/img/active/gou.png"
alt=
""
>
</el-col>
<el-col
:span=
"6"
>
<p
style=
"color:#333333"
class=
"pfR"
>
已激活,预计收益 ¥360
</p>
<p
style=
"color:#999999"
>
月交易额已达
<span
class=
"pfR"
>
¥1000
</span><span>
返
</span><span
class=
"pfR"
>
2%
</span></p>
</el-col>
</el-row>
</div>
</div>
<div
class=
"hotDate"
>
<p
class=
"f14 pfR"
>
近期热门团期
</p>
<div
class=
"basefix"
>
<div
class=
"hotItem"
>
<div
class=
"ImgDiv"
>
<img
src=
"../../../assets/img/activy.jpg"
alt=
""
>
<p
class=
"text1"
>
[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒
</p>
</div>
<el-row>
<el-col
:span=
"12"
style=
"color:#FF6600"
><span
class=
"f12"
>
¥
</span><span
class=
"f18 pfR"
>
311
</span></el-col>
<el-col
:span=
"12"
style=
"text-align:right"
>
<span
style=
"color:#666666"
class=
"f12"
>
出发:7-16
</span>
</el-col>
</el-row>
</div>
<div
class=
"hotItem"
>
<div
class=
"ImgDiv"
>
<img
src=
"../../../assets/img/activy.jpg"
alt=
""
>
<p
class=
"text1"
>
[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒
</p>
</div>
<el-row>
<el-col
:span=
"12"
style=
"color:#FF6600"
><span
class=
"f12"
>
¥
</span><span
class=
"f18 pfR"
>
311
</span></el-col>
<el-col
:span=
"12"
style=
"text-align:right"
>
<span
style=
"color:#666666"
class=
"f12"
>
出发:7-16
</span>
</el-col>
</el-row>
</div>
<div
class=
"hotItem"
>
<div
class=
"ImgDiv"
>
<img
src=
"../../../assets/img/activy.jpg"
alt=
""
>
<p
class=
"text1"
>
[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒
</p>
</div>
<el-row>
<el-col
:span=
"12"
style=
"color:#FF6600"
><span
class=
"f12"
>
¥
</span><span
class=
"f18 pfR"
>
311
</span></el-col>
<el-col
:span=
"12"
style=
"text-align:right"
>
<span
style=
"color:#666666"
class=
"f12"
>
出发:7-16
</span>
</el-col>
</el-row>
</div>
<div
class=
"hotItem"
>
<div
class=
"ImgDiv"
>
<img
src=
"../../../assets/img/activy.jpg"
alt=
""
>
<p
class=
"text1"
>
[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒
</p>
</div>
<el-row>
<el-col
:span=
"12"
style=
"color:#FF6600"
><span
class=
"f12"
>
¥
</span><span
class=
"f18 pfR"
>
311
</span></el-col>
<el-col
:span=
"12"
style=
"text-align:right"
>
<span
style=
"color:#666666"
class=
"f12"
>
出发:7-16
</span>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
}
},
mounted
()
{
},
methods
:
{
}
}
</
script
>
<
style
>
@import
"../../../assets/css/common.css"
;
#Red
.myRedBag
{
position
:
absolute
;
width
:
220px
;
height
:
59px
;
line-height
:
59px
;
text-align
:
center
;
color
:
rgb
(
221
,
221
,
221
);
top
:
-20px
;
left
:
600px
;
background
:
#E87D53
;
border-radius
:
24px
;
font-family
:
"PingFangR"
;
font-size
:
28px
;
box-shadow
:
0px
3px
10px
0px
#D34735
;
}
#Red
.hotDate
.hotItem
.ImgDiv
>
p
{
width
:
100%
;
height
:
26px
;
line-height
:
26px
;
background
:
rgba
(
0
,
0
,
0
,
0.5
);
padding
:
0
6px
;
position
:
absolute
;
bottom
:
0
;
box-sizing
:
border-box
;
font-size
:
12px
;
color
:
#fff
;
}
#Red
.hotDate
.hotItem
:first-child
{
margin-left
:
0
;
}
#Red
.hotDate
.hotItem
{
width
:
209px
;
float
:
left
;
margin-left
:
22px
;
}
#Red
.hotDate
.hotItem
.ImgDiv
{
width
:
100%
;
height
:
121px
;
position
:
relative
;
}
#Red
.hotDate
.hotItem
.ImgDiv
img
{
width
:
100%
;
height
:
100%
;
}
#Red
.hotDate
{
width
:
963px
;
background
:
rgba
(
255
,
255
,
255
,
0.8
);
padding
:
30px
;
box-sizing
:
border-box
;
margin
:
20px
0
;
}
#Red
.progress
{
width
:
100%
;
height
:
20px
;
background
:
#E3E3E3
;
border-radius
:
15px
;
overflow
:
hidden
;
}
#Red
.progress3
span
{
display
:
inline-block
;
width
:
60%
;
height
:
100%
;
background
:
#2989d8
;
/* Old browsers */
background
:
-moz-linear-gradient
(
-45deg
,
#36C7D9
33%
,
#9AE3EC
34%
,
#9AE3EC
59%
,
#36C7D9
60%
);
/* FF3.6+ */
background
:
-webkit-gradient
(
linear
,
left
bottom
,
right
top
,
color-stop
(
33%
,
#9AE3EC
),
color-stop
(
34%
,
#9AE3EC
),
color-stop
(
59%
,
#9AE3EC
),
color-stop
(
60%
,
#36C7D9
));
/* Chrome,Safari4+ */
background
:
-webkit-linear-gradient
(
-45deg
,
#36C7D9
33%
,
#9AE3EC
34%
,
#9AE3EC
59%
,
#36C7D9
60%
);
/* Chrome10+,Safari5.1+ */
background
:
-o-linear-gradient
(
-45deg
,
#36C7D9
33%
,
#9AE3EC
34%
,
#9AE3EC
59%
,
#36C7D9
60%
);
/* Opera 11.10+ */
background
:
-ms-linear-gradient
(
-45deg
,
#36C7D9
33%
,
#9AE3EC
34%
,
#9AE3EC
59%
,
#36C7D9
60%
);
/* IE10+ */
background
:
linear-gradient
(
-45deg
,
#36C7D9
33%
,
#9AE3EC
34%
,
#9AE3EC
59%
,
#36C7D9
60%
);
/* W3C */
background-size
:
60px
30px
;
text-align
:
center
;
color
:
#fff
;
}
#Red
.progress2
span
{
display
:
inline-block
;
width
:
50%
;
height
:
100%
;
background
:
#2989d8
;
/* Old browsers */
background
:
-moz-linear-gradient
(
-45deg
,
#EE4454
33%
,
#F6A1A9
34%
,
#F6A1A9
59%
,
#EE4454
60%
);
/* FF3.6+ */
background
:
-webkit-gradient
(
linear
,
left
bottom
,
right
top
,
color-stop
(
33%
,
#F6A1A9
),
color-stop
(
34%
,
#F6A1A9
),
color-stop
(
59%
,
#F6A1A9
),
color-stop
(
60%
,
#EE4454
));
/* Chrome,Safari4+ */
background
:
-webkit-linear-gradient
(
-45deg
,
#EE4454
33%
,
#F6A1A9
34%
,
#F6A1A9
59%
,
#EE4454
60%
);
/* Chrome10+,Safari5.1+ */
background
:
-o-linear-gradient
(
-45deg
,
#EE4454
33%
,
#F6A1A9
34%
,
#F6A1A9
59%
,
#EE4454
60%
);
/* Opera 11.10+ */
background
:
-ms-linear-gradient
(
-45deg
,
#EE4454
33%
,
#F6A1A9
34%
,
#F6A1A9
59%
,
#EE4454
60%
);
/* IE10+ */
background
:
linear-gradient
(
-45deg
,
#EE4454
33%
,
#F6A1A9
34%
,
#F6A1A9
59%
,
#EE4454
60%
);
/* W3C */
background-size
:
60px
30px
;
text-align
:
center
;
color
:
#fff
;
}
#Red
.progress1
span
{
display
:
inline-block
;
width
:
70%
;
height
:
100%
;
background
:
#2989d8
;
/* Old browsers */
background
:
-moz-linear-gradient
(
-45deg
,
#F8733A
33%
,
#F9B89C
34%
,
#F9B89C
59%
,
#F8733A
60%
);
/* FF3.6+ */
background
:
-webkit-gradient
(
linear
,
left
bottom
,
right
top
,
color-stop
(
33%
,
#F9B89C
),
color-stop
(
34%
,
#F9B89C
),
color-stop
(
59%
,
#F9B89C
),
color-stop
(
60%
,
#F8733A
));
/* Chrome,Safari4+ */
background
:
-webkit-linear-gradient
(
-45deg
,
#F8733A
33%
,
#F9B89C
34%
,
#F9B89C
59%
,
#F8733A
60%
);
/* Chrome10+,Safari5.1+ */
background
:
-o-linear-gradient
(
-45deg
,
#F8733A
33%
,
#F9B89C
34%
,
#F9B89C
59%
,
#F8733A
60%
);
/* Opera 11.10+ */
background
:
-ms-linear-gradient
(
-45deg
,
#F8733A
33%
,
#F9B89C
34%
,
#F9B89C
59%
,
#F8733A
60%
);
/* IE10+ */
background
:
linear-gradient
(
-45deg
,
#F8733A
33%
,
#F9B89C
34%
,
#F9B89C
59%
,
#F8733A
60%
);
/* W3C */
background-size
:
60px
30px
;
text-align
:
center
;
color
:
#fff
;
}
#Red
.jyeDiv
.jyItem
{
margin-top
:
30px
;
}
#Red
.jyeDiv
{
width
:
963px
;
background
:
rgba
(
255
,
255
,
255
,
0.8
);
margin-top
:
20px
;
padding
:
35px
30px
20px
30px
;
box-sizing
:
border-box
;
}
#Red
.banner
.ckBtn
{
width
:
110px
;
height
:
38px
;
background
:
#FBE775
;
border
:
4px
solid
rgba
(
245
,
216
,
87
,
1
);
border-radius
:
4px
;
margin-top
:
60px
;
text-align
:
center
;
color
:
#B55D1D
;
line-height
:
38px
;
font-size
:
14px
;
display
:
inline-block
;
}
#Red
.banner
{
width
:
963px
;
height
:
162px
;
background
:
#EEA376
;
border-radius
:
24px
;
padding
:
6px
;
box-sizing
:
border-box
;
}
#Red
.bannerContent
{
width
:
100%
;
height
:
100%
;
background
:
#EE736B
;
border-radius
:
24px
;
padding
:
0
60px
0
40px
;
box-sizing
:
border-box
;
}
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment