dev/dcp-app-gate/pages/resourceSharing/resourceSharing2.vue

<template>
    <view class="rf-category" style="position: relative;">
        <!--搜索导航栏-->
        <view class="icoStyle">
            <view class="leftArrow" @tap="back">
                <u-icon name="arrow-left" color="#fff" size="36"></u-icon>
            </view>
            <view style="width:90%;height:99upx">
                <rf-search-bar @search="navToSearch" icon="iconkuaijiecaidan" />
            </view>
        </view>
        <!-- 可滑动标签    开始-->
        <!-- <view class="wrap">
            <view style="background-color: #fff;margin-top: 140upx;width: 100%;font-size: 24upx;">
                <u-tabs-swiper activeColor="rgb(24, 144, 255)" bar-width="130" ref="tabs" :list="tabList" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
            </view>
            <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
                <swiper-item class="swiper-item">
                    <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
                        <view style="width: 100%;height: 595upx;background-color: #fff;margin-top: 20upx;">
                            <view style="width: 100%;height: 83upx;padding: 0 30upx;">
                                <text style="float: left;font-size: 26upx;font-weight: 600;line-height: 83upx;color: #333333;">
                                    推荐
                                </text>
                                <view style="float: right;font-size: 24upx;font-weight: 400;line-height: 83upx;">
                                    <text style="color: #848485;">
                                        更多
                                    </text>
                                    <u-icon name="arrow-right" color="#848485" size="20"
                                            style="font-size: 24upx;font-weight: 400;"></u-icon>
                                </view>
                                <view style="clear: both;"></view>
                            </view>
                            <view style="width: 100%;height: 410upx;padding: 0 30upx;">
                                <view v-for="(item,index) in recommendList" style="float: left;"
                                        :style="{marginLeft:index%3==0?'0upx':'18upx'}">
                                    <view style="width: 218upx;height: 280upx;">
                                        <image :src="item.src" mode="" style="width: 100%;height: 100%;"></image>
                                    </view>
                                    <view style="width: 218upx;height: 130upx;padding: 20upx 0;">
                                        <text style="font-size: 28upx; color: #0B0B11;" class="twoLine">
                                            {{item.name}}
                                        </text>
                                    </view>
                                </view>
                                <view style="clear: both;"></view>
                            </view>
                            <view style="width: 100%;height: 102upx;">
                                <view style="width: 205upx;height: 72upx;border-radius: 36upx;background-color: #EBF3FF;margin: 0 auto;text-align: center;">
                                    <view>
                                        <text style="font-size: 28upx;font-weight: 400;color: #3D7FFF;line-height: 72upx;">
                                            <text>换一批</text>
                                        </text>
                                        <u-icon name="reload" color="#3D7FFF" size="20"></u-icon>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view style="width: 100%;height: 353upx;background-color: #fff;margin-top: 20upx;">
                            <view style="width: 100%;height: 83upx;padding: 0 30upx;">
                                <text style="font-size: 26upx;font-weight: 600;line-height: 83upx;color: #333333;">
                                    热度TOP10
                                </text>
                            </view>
                            <view style="width: 100%;height: 410upx;padding: 0 30upx;">
                                <view>
                                    <view v-for="(item,index) in recommendList" style="float: left;"
                                            :style="{marginLeft:index%3==0?'0upx':'18upx'}">
                                        <view style="width: 218upx;height: 280upx;">
                                            <image :src="item.src" mode="" style="width: 100%;height: 100%;"></image>
                                        </view>
                                        <view style="width: 218upx;height: 130upx;padding: 20upx 0;">
                                            <text style="font-size: 28upx; color: #0B0B11;" class="twoLine">
                                                {{item.name}}
                                            </text>
                                        </view>
                                    </view>
                                </view>
                                <view style="clear: both;"></view>
                            </view>
                        </view>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="swiper-item">
                    <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">

                    </scroll-view>
                </swiper-item>
            </swiper>
        </view> -->
        <!-- 可滑动标签    结束-->
        <!-- 标签-->
        <view>
            <view style="background-color: #fff;width: 100%;font-size: 24upx;">
                <u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"
                        swiperWidth="750" bar-width="130" activeColor="rgb(24, 144, 255)"></u-tabs>
            </view>
            <view v-show="current==0">
                <!-- 推荐 -->
                <view style="width: 100%;height: 595upx;background-color: #fff;margin-top: 20upx;">
                    <view style="width: 100%;height: 83upx;padding: 0 30upx;">
                        <text style="float: left;font-size: 26upx;font-weight: 600;line-height: 83upx;color: #333333;">
                            {{i18n('Recommend')}}
                        </text>
                        <view style="float: right;font-size: 24upx;font-weight: 400;line-height: 83upx;" @click="toList('resultRecommend')">
                            <text style="color: #848485;">
                                {{i18n('MoreInfo')}}
                            </text>
                            <u-icon name="arrow-right" color="#848485" size="20"
                                    style="font-size: 24upx;font-weight: 400;"></u-icon>
                        </view>
                        <view style="clear: both;"></view>
                    </view>
                    <view style="width: 100%;height: 410upx;padding: 0 30upx;">
                        <view v-for="(item,index) in recommendList" style="float: left;"
                              :style="{marginLeft:index%3==0?'0upx':'18upx'}">
                            <view style="width: 218upx;height: 280upx;">
                                <image :src="item.src" mode="" style="width: 100%;height: 100%;"></image>
                            </view>
                            <view style="width: 218upx;height: 130upx;padding: 20upx 0;">
                                <text style="font-size: 28upx; color: #0B0B11;" class="twoLine">
                                    {{item.name}}
                                </text>
                            </view>
                        </view>
                        <view style="clear: both;"></view>
                    </view>
                    <view style="width: 100%;height: 102upx;">
                        <view style="width: 205upx;height: 72upx;border-radius: 36upx;background-color: #EBF3FF;margin: 0 auto;text-align: center;">
                            <view>
                                <text style="font-size: 28upx;font-weight: 400;color: #3D7FFF;line-height: 72upx;">
                                    <text>{{i18n('ChangeTheBatch')}}</text>
                                </text>
                                <u-icon name="reload" color="#3D7FFF" size="28"></u-icon>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 热度top10 -->
                <view style="width: 100%;height: 353upx;background-color: #fff;margin-top: 20upx;">
                    <view style="width: 100%;height: 83upx;padding: 0 30upx;">
                        <text style="font-size: 26upx;font-weight: 600;line-height: 83upx;color: #333333;">
                            {{i18n('resourceHeat')}}TOP10
                        </text>
                    </view>
                    <view style="width: 100%;height: 270upx;padding: 0 30upx 60upx 30upx;">
                        <!--列表横向滚动-->
                        <scroll-view scroll-x="true" class="recommendScroll">
                            <block>
                                <view v-for="(item,index) in recommendList" class="item"
                                      :style="{marginLeft:index==0?'0upx':'20upx'}">
                                    <view style="width: 150upx;height: 193upx;float: left;margin: 8upx 13upx 9upx 8upx;">
                                        <image :src="item.src" mode="" style="width: 100%;height: 100%;"></image>
                                    </view>
                                    <view style="width: 224upx;height: 100%;padding-top: 9upx;float: left;">
                                        <view style="width: 100%; ">
                                            <text style="font-size: 26upx; color: #0B0B11;" class="twoLine">
                                                {{item.name}}
                                            </text>
                                        </view>
                                        <view style="width: 100%;">
                                            <text style="font-size: 22upx; color: #666666; line-height: 25upx;display: inline-block;width: 100%;" class="oneLine">
                                                {{item.name}}
                                            </text>
                                        </view>
                                        <view style="width: 100%;">
                                            <text style="padding: 0 13upx; font-size: 22upx; color: #666666;border-radius: 22upx;display: inline-block;border: 2px solid #1777FE;color: #1777FE;">
                                                战略研究
                                            </text>
                                        </view>
                                    </view>
                                    <view style="clear: both;"></view>
                                </view>
                            </block>
                        </scroll-view>
                    </view>
                </view>
                <!-- 列表 -->
                <view style="width: 100%;background-color: #fff;margin-top: 20upx;">
                    <view style="width: 100%; height: 86upx;">
                        <u-dropdown class="u-dropdown" style="background-color: #fff;width: 100%;">
                            <u-dropdown-item v-model="value1" :title="i18n('Comprehensive')" @change="dropdownChange" :options="options1"></u-dropdown-item>
                            <u-dropdown-item :title="i18n('resourceType')">
                                <view >
                                    <view class="item-box">
                                        <view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)" v-for="(item, index) in options2" :key="index">
                                            {{item.label}}
                                        </view>
                                    </view>
                                    <u-button type="primary" @click="closeDropdown">确定</u-button>
                                </view>
                            </u-dropdown-item>
                        </u-dropdown>
                    </view>
                    <view style="width: 100%;padding: 0 30upx;">
                        <view v-for="(item,index) in recommendList" style="width: 100%;height: 280upx;"
                              :style="{marginTop:index==0?'0upx':'60upx'}">
                            <view style="width: 218upx;height: 280upx;float: left;border: 1px solid #979797;margin-right: 20upx">
                                <image :src="item.src" mode="" style="width: 100%;height: 100%;"></image>
                            </view>
                            <view style="width: 452upx;height: 100%;float: left;position: relative;">
                                <view>
                                    <text style="font-size: 30upx; color: #0B0B11;" class="twoLine">
                                        {{item.name}}
                                    </text>
                                </view>
                                <view style="margin-top: 13upx;">
                                    <text style="font-size: 26upx; padding: 0 13upx; border: 2px solid #1777FE;
											display: inline-block;border-radius: 32upx;color: #1777FE;">
                                        {{item.name}}
                                    </text>
                                </view>
                                <view style="margin-top: 13upx;">
                                    <text style="font-size: 26upx; padding: 0 13upx; display: inline-block;
											border-radius: 12upx;background-color: rgba(61,127,255,0.1);color: #3D7FFF;">
                                        会员
                                    </text>
                                </view>
                                <view style="position: absolute;bottom: 0;width: 100%;height: 35upx;color: #666;">
                                    <view style="float: left;height: 100%">
                                        <text style="font-size: 28upx;">2020/09/22</text>
                                    </view>
                                    <view style="float: right;">
                                        <view style="float: left;font-size: 28upx;font-weight: 400;">
                                            <u-icon name="heart" color="#848485" size="28" style="margin-right: 6upx"></u-icon>
                                            <text style="color: #666;">
                                                666
                                            </text>
                                        </view>
                                        <view style="float: left;font-size: 28upx;font-weight: 400;margin-left: 70upx;">
                                            <u-icon name="arrow-right" color="#848485" size="28" style="margin-right: 6upx"></u-icon>
                                            <text style="color: #666;">
                                                888
                                            </text>
                                        </view>
                                    </view>
                                    <view style="clear: both;"></view>
                                </view>
                            </view>
                            <view style="clear: both;"></view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-show="current==1">
                <!-- 推荐 -->
                <view style="width: 100%;height: 925upx;background-color: #fff;margin-top: 20upx;">
                    <view style="width: 100%;height: 83upx;padding: 0 30upx;">
                        <text style="float: left;font-size: 26upx;font-weight: 600;line-height: 83upx;color: #333333;">
                            {{i18n('Recommend')}}
                        </text>
                        <view style="float: right;font-size: 24upx;font-weight: 400;line-height: 83upx;" @click="toList('resourceRecommend')">
                            <text style="color: #848485;">
                                {{i18n('MoreInfo')}}
                            </text>
                            <u-icon name="arrow-right" color="#848485" size="20"
                                    style="font-size: 24upx;font-weight: 400;"></u-icon>
                        </view>
                        <view style="clear: both;"></view>
                    </view>
                    <view style="width: 100%;height: 740upx;padding: 0 30upx;">
                        <view v-for="(item,index) in recommendList" style="float: left;width: 335upx; height: 375upx;"
                              :style="{marginLeft:index%2==0?'0upx':'20upx'}">
                            <view style="width: 335upx;height: 280upx;">
                                <image :src="item.src" mode="" style="width: 100%;height: 100%;"></image>
                            </view>
                            <view style="width: 335upx;height: 95upx;padding: 20upx 0 30upx 0;">
                                <text style="font-size: 28upx; color: #0B0B11;" class="twoLine">
                                    {{item.name}}
                                </text>
                            </view>
                        </view>
                        <view style="clear: both;"></view>
                    </view>
                    <view style="width: 100%;height: 102upx;">
                        <view style="width: 205upx;height: 72upx;border-radius: 36upx;background-color: #EBF3FF;margin: 0 auto;text-align: center;">
                            <view style="width: 100%;height: 100%;text-align: center;">
                                <text style="font-size: 28upx;font-weight: 400;color: #3D7FFF;line-height: 72upx;">
                                    <text>{{i18n('ChangeTheBatch')}}</text>
                                </text>
                                <u-icon name="reload" color="#3D7FFF" size="20"></u-icon>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 热度top10 -->
                <view style="width: 100%;height: 353upx;background-color: #fff;margin-top: 20upx;">
                    <view style="width: 100%;height: 83upx;padding: 0 30upx;">
                        <text style="font-size: 26upx;font-weight: 600;line-height: 83upx;color: #333333;">
                            {{i18n('resourceHeat')}}TOP10
                        </text>
                    </view>
                    <view style="width: 100%;height: 273upx;padding: 0 30upx;">
                        <!-- <view style="width: 4000upx;"> -->
                        <view style="width: 4000upx;">
                            <view v-for="(item,index) in recommendList" class="scroll-view-item_H"
                                  style="float: left;width: 446upx;height: 160upx;border: 1px solid #979797;"
                                  :style="{marginLeft:index==0?'0upx':'20upx'}">
                                <view style="width: 220upx;height: 140upx;float: left;margin: 10upx 20upx 10upx 10upx;">
                                    <image :src="item.src" mode="" style="width: 100%;height: 100%;"></image>
                                </view>
                                <view style="width: 176upx;height: 100%;padding-top: 9upx;float: left;">
                                    <view style="width: 100%;height: 40upx;">
                                        <text style="font-size: 26upx; color: #0B0B11;display: inline-block;width: 100%;" class="oneLine">
                                            {{item.name}}
                                        </text>
                                    </view>
                                    <view style="width: 100%;height: 40upx;">
                                        <text style="font-size: 22upx; color: #666666; line-height: 25upx;display: inline-block;width: 100%;" class="oneLine">
                                            {{item.name}}
                                        </text>
                                    </view>
                                    <view style="width: 100%;">
                                        <text style="padding: 0 13upx; font-size: 22upx; color: #666666;border-radius: 22upx;display: inline-block;border: 2px solid #1777FE;color: #1777FE;">
                                            战略研究
                                        </text>
                                    </view>
                                </view>
                                <view style="clear: both;"></view>
                            </view>
                        </view>
                        <view style="clear: both;"></view>
                    </view>
                </view>
                <!-- 列表 -->
                <view style="width: 100%;background-color: #fff;margin-top: 20upx;">
                    <view style="width: 100%; height: 86upx;">
                        <u-dropdown class="u-dropdown" style="background-color: #fff;width: 100%;">
                            <u-dropdown-item v-model="value1" :title="i18n('Comprehensive')" @change="dropdownChange" :options="options1"></u-dropdown-item>
                            <u-dropdown-item :title="i18n('resourceType')">
                                <view >
                                    <view class="item-box">
                                        <view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)" v-for="(item, index) in options2" :key="index">
                                            {{item.label}}
                                        </view>
                                    </view>
                                    <u-button type="primary" @click="closeDropdown">确定</u-button>
                                </view>
                            </u-dropdown-item>
                        </u-dropdown>
                    </view>
                    <view style="width: 100%;padding: 0 30upx;">
                        <view v-for="(item,index) in recommendList" style="width: 100%;height: 280upx;"
                              :style="{marginTop:index==0?'0upx':'60upx'}">
                            <view style="width: 218upx;height: 280upx;float: left;">
                                <image :src="item.src" mode="" style="width: 100%;height: 100%;"></image>
                            </view>
                            <view style="width: 452upx;height: 100%;float: left;">
                                <view>
                                    <text style="font-size: 30upx; color: #0B0B11;" class="twoLine">
                                        {{item.name}}
                                    </text>
                                </view>
                                <view style="margin-top: 13upx;">
                                    <text style="font-size: 26upx; padding: 0 13upx; border: 2px solid #1777FE;
											display: inline-block;border-radius: 32upx;color: #1777FE;">
                                        {{item.name}}
                                    </text>
                                </view>
                                <view style="margin-top: 13upx;">
                                    <text style="font-size: 26upx; padding: 0 13upx; display: inline-block;
											border-radius: 12upx;background-color: rgba(61,127,255,0.1);color: #3D7FFF;">
                                        会员
                                    </text>
                                </view>
                            </view>
                            <view style="clear: both;"></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import rfSearchBar from '@/components/rf-search-bar';
    import {getDicts,getDictByTypeValue} from '@/api/dict';
    export default {
        data() {
            return {
                classify1:'',
                classify2:'',
                tabList: [
                    {
                        name: this.i18n('resource')
                    },
                    {
                        name: this.i18n('researchResource')
                    },
                ],

                value1:'',
                value2:'',


                dx: 0,
                current: 0,
                swiperCurrent: 0,
                recommendList:[
                    {
                        name:'全球能源互联网促进全球环',
                        src:'',
                    },
                    {
                        name:'非洲能源互联网规划研究报告',
                        src:'',
                    },
                    {
                        name:'破解危机',
                        src:'',
                    },
                ],
                options1:[
                    {
                        label: '时间降序',
                        value: 1,
                    },
                    {
                        label: '时间升序',
                        value: 2,
                    },
                    {
                        label: '热度降序',
                        value: 3,
                    },
                    {
                        label: '热度升序',
                        value: 4,
                    }
                ],
                options2:[
                    {
                        label: '琪花瑶草',
                        active: true,
                    },
                    {
                        label: '清词丽句',
                        active: false,
                    },
                    {
                        label: '宛转蛾眉',
                        active: false,
                    },
                    {
                        label: '煦色韶光',
                        active: false,
                    },
                    {
                        label: '鱼沉雁落',
                        active: false,
                    },
                    {
                        label: '章台杨柳',
                        active: false,
                    },
                    {
                        label: '霞光万道',
                        active: false,
                    }
                ],
            }
        },
        async onShow() {
            this.getDict();
            // this.getList();
        },
        components: { rfSearchBar },
        methods: {
            navToSearch(){},
            dropdownChange(){},
            closeDropdown(){},

            // tab栏切换
            change(index) {
                this.current = index;
                /* this.swiperCurrent = index;
                this.getOrderList(index); */
            },
            transition({ detail: { dx } }) {
                this.$refs.tabs.setDx(dx);
            },
            animationfinish({ detail: { current } }) {
                this.$refs.tabs.setFinishCurrent(current);
                this.swiperCurrent = current;
                this.current = current;
            },
            //滚动到底部、右边， 会触发 scrolltolower 事件
            /* reachBottom() {
                // 此tab为空数据
                if(this.current != 2) {
                    this.loadStatus.splice(this.current,1,"loading")
                    setTimeout(() => {
                        this.getOrderList(this.current);
                    }, 1200);
                }
            }, */
            // 跳转列表
            toList(path){
                uni.navigateTo({
                    url:'/pages/resourceSharing/'+path
                })
            },
            // 跳转详情

            async getDict(){
                // const res = await this.$myRequest({
                // 	url: '/sys/sysDicts/',
                // 	data: {
                // 		type:this.$i18n.locale=="zh"?'RESEARCH_RESULT_TYPE_DICT	,RESEARCH_RESOURCE_TYPE_DICT':'RESEARCH_RESULT_TYPE_DICT_EN,RESEARCH_RESOURCE_TYPE_DICT_EN',
                // 	}
                // });

                let res = await getDicts( "RESEARCH_RESULT_TYPE_DICT,RESEARCH_RESOURCE_TYPE_DICT" );
                if (res.data) {
                    this.classify1 = res.data[0];
                    this.classify2 = res.data[1];
                }
                let both={
                    label:this.$t('common.All'),
                    value:null
                };
                this.classify1=res.data[0];
                this.classify2=res.data[1];
                this.classify1.unshift(both);
                this.classify2.unshift(both);
            },
            async getRecommend(){
                // const res = await this.$myRequest({
                // 	url: '/sys/sysDicts/',
                // 	data: {
                // 		type:this.$i18n.locale=="zh"?'RESEARCH_RESULT_TYPE_DICT	,RESEARCH_RESOURCE_TYPE_DICT':'RESEARCH_RESULT_TYPE_DICT_EN,RESEARCH_RESOURCE_TYPE_DICT_EN',
                // 	}
                // });

                let res = await getDicts( "RESEARCH_RESULT_TYPE_DICT,RESEARCH_RESOURCE_TYPE_DICT" );
                if (res.data) {
                    this.classify1 = res.data[0];
                    this.classify2 = res.data[1];
                }
                let both={
                    label:this.$t('common.All'),
                    value:null
                };
                this.classify1=res.data[0];
                this.classify2=res.data[1];
                this.classify1.unshift(both);
                this.classify2.unshift(both);
            },

            async getList(num){
                let page ={
                    pageNo:this.page,
                    pageSize:  10,
                    language:this.$i18n.locale.toUpperCase(),
                    descStatus:this.value1,
                    messageOpenType:'Y',
                    status:1,
                    technicalCategories:this.value3,
                    continentCountry:this.value2,
                    projectName:this.input
                };
                const res = await this.$myRequest({
                    url: '/resourceshare/baseResearchResultViews/',
                    data: {
                        ...page
                    }
                });
                this.total2=res.data.page.totalPage;
                if(res.data){
                    if(this.page==1){
                        this.ProjectList=res.data.baseProjectViews?res.data.baseProjectViews : [];
                    }else {
                        this.ProjectList=this.ProjectList.concat(res.data.baseProjectViews)
                    }
                }
                if(this.ProjectList.length>=this.total2-0){
                    this.status = 'nomore';
                }
            },
            back() {
                uni.navigateBack();
            },
            //中英文切换
            i18n (data) {
                return this.$t('common.'+data);
            },
        }
    }
</script>


<style lang="scss" scoped>
    .rf-category {
        background-color: #F3F4F5;
        /*  #ifdef  APP-PLUS  */
        margin-top: calc(20upx + var(--status-bar-height));
        /*  #endif  */
        .icoStyle {
            display: flex;
            align-items:center;
            .leftArrow {
                width:36upx;
                height:36upx;
                position: fixed;
                z-index: 99;
                /*  #ifdef  APP-PLUS  */
                padding-top: calc(20upx + var(--status-bar-height));
                /*  #endif  */
            }
        }
        .oneLine{
            /* 隐藏溢出元素 */
            overflow: hidden;
            /* 单行显示 */
            white-space: nowrap;
            /* 溢出显示省略号 */
            text-overflow: ellipsis;
        }
        .twoLine{
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .threeLine{
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .wrap {
            display: flex;
            flex-direction: column;
            height: calc(100vh - var(--window-top));
            width: 100%;
        }
        .swiper-box {
            flex: 1;
        }
        .swiper-item {
            height: 100%;
        }
        .item-box {
            margin-bottom: 50rpx;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .item-box .item {
            border: 1px solid $u-type-primary;
            color: $u-type-primary;
            padding: 8rpx 40rpx;
            border-radius: 100rpx;
            margin-top: 30rpx;
        }


        .recommendScroll{
            overflow: hidden;
            white-space: nowrap; // 滚动必须加的属性
            width: 100%;
            height: 210upx;
            margin: 0 auto;
        }
        .recommendScroll .item{
            width: 400upx;
            height: 210upx;
            border: 1px solid #979797;
            display: inline-block;
            vertical-align: top;
        }
    }
</style>