寒假学习日记1

今天主要学习uniapp

以下是编写的相关代码

<template>
    <view class="user">
        <div class="top">
            <image src="/static/images/history.png" mode=""></image>
            <text>浏览历史</text>
        </div>
        <view class="content">
            <div class="row" v-for="item in 10">
                <newsbox :item="{title:'user标题',looktime:'2024-01-08'}"></newsbox>
            </div>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        }
    }
</script>

<style lang="scss">
.user{
    .top{
        padding: 50rpx 0;
        background: #f8f8f8;
        color: #666;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        image{
            width: 150rpx;
            height: 150px;
        }
        .text{
            font-size: 38rpx;
            padding-top: 20rpx;
        }
    }
}
.content{
    padding: 30rpx;
    .row{
        border-bottom: 1px dashed #efefef;
        padding: 20rpx 0;
    }
}
</style>

<template>
    <view class="home">

        <scroll-view scroll-x class="navscroll">
            <view class="item" :class="index==navIndex  ? 'active': ''" v-for="(item,index) in 10" @click="clickNav(index)">国内</view>
            
        </scroll-view>

        <view class="content">
            <div class="row" v-for="item in 10">
                <newsbox :item="{title:'首页标题',author:'李四',hits:'33'}"></newsbox>
            </div>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                navIndex:0
            }
        },
        onl oad() {

        },
        methods: {
            clickNav(index){
                this.navIndex=index
            }
        }
    }
</script>

<style lang="scss" scoped>
.navscroll{
    height: 100rpx;
    background: #F7F8FA;
    white-space: nowrap;//换行
    position: fixed;
    top: var(--window-top);
    left: 0;
    // 下面是没有滚动条
    /deep/ ::-webkit-scrollbar{
        width: 4px !important;
        height: 1px !important;
        overflow: auto !important;
        background: transparent  !important;
        -webkit-appearance: auto !important;
        display: block;
    }
    .item{
        font-size: 40rpx;
        display: inline-block;//展示在盒子里
        line-height: 100rpx;
        padding: 0 30rpx;//上下为0，左右为30rpx
        color: #333;
        &.active{
            color: #31C27C;
        }
    }
}
.content{
    padding: 30rpx;
    padding-top: 130rpx;
    .row{
        border-bottom: 1px dashed #efefef;
        padding: 20rpx 0;
    }
}
</style>