You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
3.3 KiB
164 lines
3.3 KiB
<template>
|
|
<view class="article">
|
|
<view class="article-hd">
|
|
<view class="search">
|
|
<view class="box">
|
|
<image src="/static/news/icon-search.png"></image>
|
|
<input type="search" placeholder="商品名称/编码" />
|
|
</view>
|
|
<view class="add">
|
|
<image src="/static/news/icon-add.png"></image>新增
|
|
</view>
|
|
</view>
|
|
<u-tabs :list="list" :is-scroll="false" v-model="current" active-color="#FF2525" inactive-color="#6F6F6F" font-size="30" ></u-tabs>
|
|
</view>
|
|
<view class="article-bd">
|
|
<u-swipe-action class="b" v-for="k in 5" :key="i" @click="clickItem(11)" :options="options">
|
|
<view class="item u-border-bottom">
|
|
<view class="pic">
|
|
<image mode="aspectFill" src="@/static/home/phone.jpg" />
|
|
</view>
|
|
<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
|
|
<view class="info title-wrap">
|
|
<view class="title">荣耀畅玩 40 Plus 全网通5G版 绿8GB+128GB</view>
|
|
<view class="desc">
|
|
这是文章内容这是文章内容这是文章内容这是文章内容这是文章..
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-swipe-action>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
options: [
|
|
{
|
|
text: '编辑',
|
|
style: {
|
|
backgroundColor: '#FF8844'
|
|
}
|
|
},
|
|
{
|
|
text: '删除',
|
|
style: {
|
|
backgroundColor: '#FF564A'
|
|
}
|
|
}
|
|
],
|
|
list: [{
|
|
name: '全部'
|
|
}, {
|
|
name: '分类1'
|
|
}, {
|
|
name: '分类2'
|
|
}, {
|
|
name: '分类3'
|
|
}, {
|
|
name: '分类4'
|
|
}, {
|
|
name: '分类5'
|
|
}, {
|
|
name: '分类6'
|
|
}],
|
|
current: 1
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.article{
|
|
&-bd{
|
|
.uni-movable-area{
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.article{
|
|
&-hd{
|
|
background-color: #fff;
|
|
padding-bottom:20rpx;
|
|
.search{
|
|
width: 750rpx;
|
|
padding: 25rpx 35rpx;
|
|
border-bottom: 1px solid #F7F7F7;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.add{
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #FF584D;
|
|
margin-left: 20rpx;
|
|
image{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
.box{
|
|
padding: 15rpx 25rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #F3F3F3;
|
|
border-radius: 60rpx;
|
|
flex: 1;
|
|
image{
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-right: 22rpx;
|
|
}
|
|
input{
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-bd{
|
|
padding-bottom: 20rpx;
|
|
overflow: hidden;
|
|
.b{
|
|
margin-top: 20rpx;
|
|
}
|
|
.item{
|
|
padding: 30rpx 45rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
.pic{
|
|
width: 200rpx;
|
|
height: 160rpx;
|
|
margin-right: 20rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.info{
|
|
flex: 1;
|
|
max-width: 430rpx;
|
|
.title{
|
|
height: 50rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #3B3B3B;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|