uni-app首页制作案列之（smartcity）

<template>
    <view>
        <view>
            <u-search >搜索</u-search>
        </view>
        <!-- 轮播图 -->
        <view class="pics">
            <swiper indicator-dots autoplay circular interval="3000">
                <swiper-item v-for="(item,index) in list" :key='item.id'>
                    <image :src="'http://124.93.196.45:10001'+item.advImg"></image>
                </swiper-item>
            </swiper>
       </view>

<style>

.pics{
    image{
        width: 100%;
        height: 100%;
    }
}

<style>

<template>

        <!-- 全部服务 -->
        <view class="server">
            <u-grid col="5">
                <u-grid-item v-for="(item,index) in server" :key='item.id' @click="gostop(index)">
                    <image v-if="index<9" :src="'http://124.93.196.45:10001'+item.imgUrl"></image>
                        <text v-if="index<9">{{item.serviceName}}</text>
                    <image v-if="index==9" src="../../static/uview/example/component.png"></image>
                            <text v-if="index==9">更多</text>
                </u-grid-item>
            </u-grid>
        </view>

<style>

.hot{
    .hot-item{
        margin: 25rpx;
    }
    .hot-pics{
        image{
            width: 100%;
            border-radius: 20rpx;
        }
        /* width: 300rpx; */
    }
}

<stle>

        <view class="newslist">
            <view class="newslist-tit">
                新闻专栏
            </view>
            <view>
                <u-tabs :list="newitem" name="name"></u-tabs>
            </view>
            <view>
                <view v-for="(item,index) in newslist" @click="change(item.id)">
                    <image :src="'http://124.93.196.45:10001'+item.cover"></image>
                    <view>{{item.title}}</view>
                    <view class="news-title">
                        <view>评论数:{{item.commentNum}}</view>
                        <view>发布日期:{{item.publishDate}}</view>
                    </view>
                </view>
            </view>
        </view>

<style>

.newslist{
    .newslist-tit{
        margin: 25rpx;
    }
    image{
        width: 100%;
        height: 400rpx;
    }
    .news-title{
        display: flex;
        justify-content: space-between;
        margin-top: 10rpx;
        color: #888;
    }
}

<style>

标签：width,100%,smartcity,案列,item,hot,image,margin,app
来源： https://blog.csdn.net/careful_thebrave/article/details/121912775