study vant

Posted 2021-03-24 cnchengv

<template>

<div >
<van-nav-bar
  title="登陆"
  left-text="返回"

  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

    <van-cell-group class="user-group" style="margin-top:50px;margin-bottom:10px">
      <van-cell title="没有注册?先去注册" style="color: rgba(69, 90, 100, 0.6);" is-link />
    </van-cell-group>

<van-cell-group>
  <van-field
    v-model="username"
    required
    clearable
    label="用户名"
    right-icon="question-o"
    placeholder="请输入用户名"
    @click-right-icon="$toast(‘question‘)"
  />

  <van-field
    v-model="password"
    type="password"
    label="密码"
    placeholder="请输入密码"
    required
  />
</van-cell-group>
    <div style="    position:fixed;bottom:0;width:100%;">
    <van-row class="user-links" >
      <van-col span="8">
        首页
      </van-col>
      <van-col span="8">
        发文
      </van-col>
      <van-col span="8">
        未登陆
      </van-col>
    </van-row>
    </div>
</div>   
</template>
<style lang="less">
.user {
  &-poster {
    width: 100%;
    height: 53vw;
    display: block;
  }

  &-group {
    margin-bottom: 15px;
  }

  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;

    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
}
</style>

 

list-item

<template>

    <div class="media-item view" v-if="options.title" @click="click">

        <div class="view" :style="{flexDirection: getViewStyle(options) }" style="display: flex;">
            <div class="media-title" 
            :class="{‘media-title2‘: options.article_type === 1 || options.article_type === 2}"><span>{{options.title}}</span></div>
        
            <div v-if="options.image_list || options.image_url" class="image-section flex-row" :class="{‘image-section-right‘: options.article_type === 2, ‘image-section-left‘: options.article_type === 1}"
            :style="{flexDirection: ‘row‘ }">
                <img class="image-list1" :class="{‘image-list2‘: options.article_type === 1 || options.article_type === 2}" v-if="options.image_url"
                :src="options.image_url" />
                <img class="image-list3" v-if="options.image_list" :src="source.url" v-for="(source, i) in options.image_list"
                :key="i" />
            </div>
        
        </div>
        <div class="media-foot flex-row" style="flex-direction: row;">
            <div class="media-info flex-row" style="flex-direction: row;">
                <span class="info-text">{{options.author_name}}</span>
                <span class="info-text">{{options.comments_count}}条评论</span>
                <span class="info-text">{{options.published_at}}</span>
            </div>

        </div>
        <div class="media-item-line" style="position: absolute;"></div>
    </div>
</template>

<script>
    export default {
        props: {
            options: {
                type: Object,
                /*
                default: function(e) {
                    return {}
                }
                */
            }
        },

        data() {
            return {/*
                options: {
                    author_name:"36氪出海",
                    comments_count:10,
                    content:"",
                    article_type:1,
                    //cover:"https://pic.36krcnd.com/201910/25072501/lvaqh1a5mp8mduj3!heading",
                    image_url:"https://pic.36krcnd.com/201910/25072501/lvaqh1a5mp8mduj3!heading",
                    id:101711,
                    post_id:"5259650",
                    published_at:"2019-10-26 09:31:06",
                    title:"出海创投周报 | 拉美独角兽 Rappi 进军哥斯达黎加；Gojek 表示将为双重上市做准备"
                },
                */
            }
        },
        mounted:function(){
            //this.options.image_url = this.options.cover
        },

        methods: {
            getViewStyle(options){
                if(options.article_type === 1)
                    return ‘row-reverse‘;
                else if(options.article_type === 2 )    
                    return ‘row‘;
                else 
                    return ‘column‘;
            },

            click() {
                this.$emit(‘click‘);
            },
            /*
            close(e) {
                this.$emit(‘close‘);
            }*/
        }
    }
</script>

<style>
    .view {
        flex-direction: column;
    }

    .flex-row {
        flex-direction: row;
    }

    .flex-col {
        flex-direction: column;
    }

    .list-cell {
        width: 750px;
        padding: 0 30px;
    }

    .uni-list-cell-hover {
        background-color: #eeeeee;
    }

    .media-item {
        position: relative;
        flex: 1;
        flex-direction: column;
        /* border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb; */
        padding: 20px 30px 21px 30px;
    }

    .media-item-line {
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: 0;
        height: 1px;
        background-color: #ebebeb;
    }

    .media-image-right {
        flex-direction: row;
    }

    .media-image-left {
        flex-direction: row-reverse;
    }

    .media-title {
        flex: 1;
    }

    .media-title {
        lines: 3;
        text-overflow: ellipsis;
        font-size: 30px;
        color: #555555;
    }

    .media-title2 {
        flex: 1;
        margin-top: 6px;
        line-height: 40px;
    }

    .image-section {
        margin-top: 20px;
        flex-direction: row;
        justify-content: space-between;
    }

    .image-section-right {
        margin-top: 0px;
        margin-left: 10px;
        width: 225px;
        height: 146px;
    }

    .image-section-left {
        margin-top: 0px;
        margin-right: 10px;
        width: 225px;
        height: 146px;
    }

    .image-list1 {
        width: 690px;
        height: 481px;
    }

    .image-list2 {
        width: 225px;
        height: 146px;
    }

    .image-list3 {
        width: 225px;
        height: 146px;
    }

    .media-info {
        flex-direction: row;
        align-items: center;
    }

    .info-text {
        margin-right: 20px;
        color: #999999;
        font-size: 24px;
    }

    .media-foot {
        margin-top: 25px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .max-close-view {
        position: relative;
        align-items: center;
        flex-direction: row;
        width: 40px;
        height: 30px;
        line-height: 30px;
        border-width: 1px;
        border-style: solid;
        border-color: #aaaaaa;
        border-radius: 4px;
        justify-content: center;
        text-align: center;
    }

    .close-l {
        position: absolute;
        width: 18px;
        height: 1px;
        background-color: #aaaaaa;
    }

    .close-h {
        transform: rotate(45deg);
    }

    .close-v {
        transform: rotate(-45deg);
    }
</style>