123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991 |
- <!-- 底部-话题 -->
- <template>
- <view class="topic">
- <view class="topic-head">
- <header-logo></header-logo>
- <div class="bar flex">
- <div class="flex" @click="stepBack">
- <u-icon name="arrow-left" color="#ffffff" size="16px" bold></u-icon>
- <!-- More -->
- {{ $t('more.lab') }}
- </div>
- </div>
-
- <!-- <view class="header">
- <view class="topic-avatar">
- <u--image
- :showLoading="true"
- class="u-skeleton-circle"
- @click="homeShow = true"
- :src="info.avatar || '/static/image/match/teams_avatar_ico@2x.png'"
- width="50rpx"
- height="50rpx"
- shape="circle"
- ></u--image>
- </view>
- <u-tabs
- :list="tabList"
- @click="change"
- lineWidth="180rpx"
- lineHeight="0"
- lineColor="#DC3C23"
- :scrollable="false"
- :itemStyle="{height: '60rpx'}"
- :activeStyle="{
- color: '#fff',
- fontSize: '32rpx',
- fontWeight: 'Bold',
- }"
- :inactiveStyle="{ color: '#fff', fontSize: '32rpx' }"
- ></u-tabs>
- </view> -->
- <view class="topip-tabs flex">
- <view class="ullist" :class="{ 'flex-center': current == 1 }">
- <view class="li-content">
- <view
- class="ulli"
- :class="{ active: index == tabsIndex }"
- v-for="(item, index) in classList"
- :key="index"
- @click="setClass(item, index)"
- >
- {{ item.name }}
- </view>
- </view>
- </view>
- <!-- <image
- src="/static/image/news/more.png"
- mode=""
- @click="toUrl('./list?type=' + current)"
- ></image> -->
- </view>
- </view>
- <view class="" v-if="current == 0">
- <view class="topic-swiper" :class="{'fadeInBtm': animationLoaded}" v-if="tabsIndex == 0 && list.length != 0">
- <swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="2000"
- :duration="500">
- <swiper-item v-for="(item, index) in list" :key="index">
- <u--image
- mode="scaleToFill"
- :showLoading="true"
- :src="item.img"
- width="100%"
- height="60vw"
- >
- <template v-slot:loading>
- <image class="loading-banner-img" src="/static/image/common/loading-banner.png"></image>
- </template>
- </u--image>
- </swiper-item>
- </swiper>
- </view>
- <!-- :style="{marginTop:show1?'204rpx':'100rpx'}" -->
- <view
- class="topic-list"
- :class="{'fadeInTop': animationLoaded}"
- v-if="current == 0"
- :style="{ marginTop: tabsIndex != 0 ? '18rpx' : '18rpx' }"
- >
- <view
- class="list-li flex"
- v-for="(item, index) in Headlist.data"
- :key="index"
- @click="$toUrl('./news-detail?id=' + item.id)"
- >
- <view class="list-li-left flex-wrap">
- <view class="list-li-left-nav text-clamp2">{{ item.title }}</view>
- <view class="list-li-left-bot flex-start">
- <!-- <text :style="{color:index == 0?'#CC374A':'#999'}">置顶</text> -->
- <text style="color: #cc374a; width: 90rpx" v-if="item.is_top == 1"
- >{{ $t('news.lab6') }}</text
- >
- <view
- class="flex-start"
- style="width: 90rpx"
- v-if="item.comment_count != 0"
- >
- <image
- src="/static/image/news/topic11.png"
- mode="aspectFill"
- ></image>
- <text>{{
- item.comment_count >= 1000000
- ? (item.comment_count % 1000000) + "M"
- : item.comment_count
- }}</text>
- </view>
- <text>{{ item.addtime }}</text>
- </view>
- </view>
- <u--image
- :showLoading="true"
- class="list-li-logo"
- radius="12"
- :src="item.img"
- width="240rpx"
- height="136rpx"
- >
- <template v-slot:loading>
- <image class="loading-list-img" src="/static/image/common/loading-banner.png"></image>
- </template>
- </u--image>
- <image
- src="../../static/image/news/hot.png"
- v-if="item.comment_count > 1000000"
- mode=""
- style="width: 25px;height: 20px;position: relative;right: 18px;top: -31px;"></image>
- <!-- <image class="list-li-logo" :src="item.img ?item.img:require('../../static/image/common/none-img.png')" mode="aspectFill"></image> -->
- </view>
- </view>
- <u-empty
- v-if="Headlist.data.length == 0"
- mode="data"
- width="474"
- height="312"
- textSize="28"
- marginTop="100"
- :text="$t('common.nodata')"
- icon="/static/image/common/nodata.png"
- >
- </u-empty>
- </view>
- <view class="Community" v-else>
- <view class="hot" v-if="current == 1 && tabsIndex == 0">
- <view class="hot-title">
- {{ $t("news.title") }}
- </view>
- <!-- <image src="../../static/image/news/hot-title.png" class="hot-title" mode=""></image> -->
- <view class="ul flex-start">
- <view
- class="li"
- v-for="(item, index) in luntanTitle"
- :key="index"
- @click="$toUrl('./news-list?id=' + item.id)"
- >
- <image :src="item.icon" mode=""></image>
- <view class="font24">
- {{ item.name }}
- </view>
- </view>
- </view>
- </view>
- <view
- class="tips font24 flex-start"
- v-if="current == 1 && tabsIndex == 0"
- >
- <text class="t">
- <!-- Fine paste -->
- {{ $t('news.lab7') }}
- </text>
- <text>
- <!-- Important reading: community management norms and user
- instructions -->
- {{ $t('news.lab8') }}
- </text>
- </view>
- <view class="u-demo-block__content">
- <u-empty
- v-if="luntanList.length == 0"
- mode="data"
- width="474"
- height="312"
- textSize="28"
- marginTop="100"
- :text="$t('common.nodata')"
- icon="/static/image/common/nodata.png"
- >
- </u-empty>
- <view
- class="album"
- @click="$toUrl('./community-detail?id=' + item.id)"
- v-for="(item, index) in luntanList"
- :key="index"
- >
- <view class="album_top flex-start">
- <image class="logo" :src="item.avatar" mode=""></image>
- <view class="">
- <u--text :text="item.user_nickname" bold size="32"></u--text>
- <u--text
- margin="6px 0 0 0"
- size="26"
- color="#999"
- :text="item.addtime"
- ></u--text>
- </view>
- </view>
- <!-- <view class="nav font28 text-clamp3" :ref="'text'+index" :style="{'-webkit-line-clamp':lunIndex == index?'initial':3}">
- {{item.title}}
- </view> -->
- <mote-lines-divide
- :line="3"
- @click.stop=""
- :expandText="$t('news.full')"
- :foldHint="$t('news.collapsed')"
- >
- {{ item.title }}
- </mote-lines-divide>
- <!-- <view class="more" :style="{display:getLength(index)?'none':''}" @click.stop="setLunIndex(index)">
- Full text
- </view> -->
- <!-- item.is_flie_type文件格式:1视频 0图片 -->
- <view class="album__content" v-if="item.is_flie_type == 0">
- <u-album multipleSize="200" space="16" :urls="item.img"></u-album>
- </view>
- <view class="album__content" v-else>
- <image
- v-if="item.video[0]"
- :src="item.video[0].img + '?vframe/jpg/offset/0'"
- style="width: 100%"
- mode=""
- ></image>
- <image
- class="play"
- src="/static/image/match/play.png"
- mode=""
- ></image>
- </view>
- <view class="types flex-start">
- <image :src="item.classification_icon" mode=""></image>
- {{ item.classification_name }}
- </view>
- <view class="flex tabbar">
- <view class="">
- <image src="/static/image/news/topic2.png" mode=""></image>
- <u--text color="#999" size="24" :text="item.favorites"></u--text>
- </view>
- <view class="">
- <image src="/static/image/news/topic7.png" mode=""></image>
- <u--text color="#999" size="24" :text="item.comment"></u--text>
- </view>
- <view class="">
- <image src="/static/image/news/topic6.png" mode=""></image>
- <u--text color="#999" size="24" :text="item.click"></u--text>
- </view>
- </view>
- </view>
- </view>
- </view>
- <image
- src="/static/image/news/topic-top.png"
- class="topic-top"
- mode="aspectFill"
- @click="go(4)"
- v-if="current == 1"
- ></image>
- <!-- <image src="/static/image/news/topic-top.png" class="topic-top" mode="aspectFill" @click="$toUrl('./publish')" v-else></image> -->
- <u-popup :show="homeShow" mode="left" @close="close" @open="open">
- <view class="home">
- <view @click="userClick">
- <view class="home-info flex-start">
- <image
- :src="
- info.avatar || '/static/image/match/teams_avatar_ico@2x.png'
- "
- mode="aspectFill"
- >
- </image>
- <view class="font32">
- <!-- Graeme van Buuren -->
- {{ isLogin == 1 ? info.user_nickname : "" }}
- </view>
- </view>
- </view>
- <view class="home-ui">
- <template v-for="(item, index) in homeList">
- <view
- class="home-li flex-start"
- @click="go(index)"
- v-if="index != 0"
- :key="index"
- >
- <image
- :src="'/static/image/match/my-' + index + '.png'"
- mode=""
- ></image>
- <view class="font32">
- {{ item }}
- </view>
- </view>
- </template>
-
- </view>
- <button
- v-if="isLogin == 1"
- type="default"
- class="size28 logout"
- @click="logOut"
- >
- {{ $t("member.out") }}
- </button>
- <button v-else type="default" class="size28 logout" @click="logIn">
- <!-- Log In -->
- {{ $t('login.login') }}
- </button>
- </view>
- </u-popup>
- <div class="news-install">
- <install></install>
- </div>
- </view>
- </template>
- <script>
- // 路径自行修改
- import MoteLinesDivide from "@/components/mote-lines-divide/mote-lines-divide";
- import animationMixin from '@/pages/mixins/animation'
- import install from "@/components/install/install.vue";
- export default {
- components: {
- MoteLinesDivide,
- install,
- },
- mixins: [animationMixin],
- data() {
- return {
- show: false,
- lunIndex: null,
- homeShow: false,
- tokenIsLogin: "",
- urls2: [
- "https://cdn.uviewui.com/uview/album/1.jpg",
- "https://cdn.uviewui.com/uview/album/2.jpg",
- "https://cdn.uviewui.com/uview/album/3.jpg",
- "https://cdn.uviewui.com/uview/album/4.jpg",
- "https://cdn.uviewui.com/uview/album/5.jpg",
- "https://cdn.uviewui.com/uview/album/6.jpg",
- "https://cdn.uviewui.com/uview/album/7.jpg",
- "https://cdn.uviewui.com/uview/album/8.jpg",
- "https://cdn.uviewui.com/uview/album/9.jpg",
- "https://cdn.uviewui.com/uview/album/10.jpg",
- ],
- homeList: [
- "Streamer application",
- this.$t("member.concerns"),
- this.$t("member.message"),
- this.$t("member.settings"),
- ],
- bannerList: [
- {
- img: "/static/images/topic/banner.jpg",
- },
- ],
- tabsIndex: 0,
- page: 1,
- status1: "more",
- status2: "more",
- luntanPage: 1,
- swCurrent: 0,
- Headlist: {
- data: [],
- },
- tabsTitle: [],
- HeadlinesList: {},
- current: 0,
- list: [],
- luntanTitle: [],
- luntanList: [],
- classList: [],
- };
- },
- computed: {
- show1: {
- get() {
- return this.$store.state.show;
- },
- set() {
- // this.$store.state.info.midMask = !this.$store.state.info.midMask
- },
- },
- info() {
- return this.$store.state.info;
- },
- isLogin() {
- return this.$store.state.isLogin;
- },
- tabList() {
- let arr = [
- {
- name: this.$t("news.tab1"),
- },
- // {
- // name: this.$t("news.tab2"),
- // },
- ];
- return arr;
- },
- },
- mounted() {
- this.getclassification();
- this.getLuntan();
- let { token } = this.$store.state.qiuNiu;
- // 判断是否登录
- this.tokenIsLogin = token;
- },
- onReachBottom() {
- //触底加载
- if (this.current == 0) {
- if (JSON.stringify(this.HeadlinesList) == "{}") return;
- if (this.status1 == "more") {
- this.getHeadlines();
- }
- } else {
- if (this.status2 == "more") {
- this.getLuntan();
- }
- }
- },
- methods: {
- // 跳转个人中心
- userClick() {
- uni.navigateTo({
- url: "../../pages/Match/member/infomation",
- });
- },
- /* 退出登录 */
- logOut() {
- this.homeShow = false;
- this.$common.del("information");
- this.$common.del("imTouristAccount");
- this.$store.state.isLogin = 2;
- },
- logIn() {
- this.homeShow = false;
- this.$toUrl('/pages/login/login')
- },
- getLength(i) {
- this.$nextTick((res) => {
- // let text = this.$refs['text'+i];
- setTimeout((res1) => {
- console.log(this.$refs["text" + i][0]);
- }, 100);
- // let rows = this.$refs.text.getClientRects().length // 文本行数
- // let txt = this.introduceOld // 文本
- });
- },
- setLunIndex(i) {
- this.lunIndex = this.lunIndex == i ? null : i;
- console.log(this.lunIndex);
- },
- // 获取论坛的分类
- getLuntan() {
- this.status2 = "loading";
- uni.$u.http
- .get("/api/circle/index", { params: { page: this.luntanPage } })
- .then((res) => {
- this.luntanTitle = res.classification;
- if (this.luntanPage == 1) {
- this.luntanList = res.list.data;
- } else {
- this.luntanList = [...this.luntanList, ...res.list.data];
- }
- if (res.list.total > this.luntanList.length) {
- this.luntanPage++;
- this.status2 = "more";
- } else {
- this.status2 = "nomore";
- }
- });
- },
- /* 获取关注的圈子 */
- getAttentionList() {
- uni.showLoading({
- title: this.$t('common.lab'),
- });
- uni.$u.http.get("/api/Circle/attentionList", {}).then((res) => {
- uni.hideLoading();
- this.luntanList = res.data;
- });
- },
- // 获取头条分类列表
- getclassification() {
- uni.$u.http.get("/api/Headlines/classification", {}).then((res) => {
- this.classList = res;
- this.classList.unshift({ name: this.$t("news.hot"), id: 0 });
- this.tabsTitle = this.classList;
- this.getHeadlines();
- // this.$db.set('system'.res.data)
- // this.HeadlinesList = res
- // this.Headlist.data = [...this.Headlist.data,...res.list.data]
- });
- },
- /* 选择头条分类 */
- setClass(item, i) {
- this.tabsIndex = i;
- if (this.current == 0) {
- this.page = 1;
- this.getHeadlines();
- } else {
- this.luntanPage = 1;
- uni.pageScrollTo({
- duration: 0,
- scrollTop: 0,
- });
- if (i == 0) {
- //热门圈子
- this.getLuntan();
- } else {
- //关注圈子
- this.getAttentionList();
- }
- }
- },
- // 置顶
- top() {
- uni.pageScrollTo({
- duration: 0,
- scrollTop: 0,
- });
- },
- open() {},
- close(event) {
- this.homeShow = false;
- },
- toUrl(url) {
- if (this.isLogin == 2) {
- } else {
- this.$toUrl(url);
- }
- },
- go(type) {
- if (this.isLogin == 2 && type != 5) {
- this.$toUrl('/pages/login/login')
- return
- };
- switch (type) {
- case 1:
- uni.navigateTo({
- url: "../Match/member/author",
- });
- break;
- case 2:
- uni.navigateTo({
- url: "../Match/message/message",
- });
- break;
- case 3:
- uni.navigateTo({
- url: "../Match/setting/setting",
- });
- break;
- case 4:
- uni.navigateTo({
- url: "./publish",
- });
- break;
- case 5:
- if (this.isLogin == 1) {
- this.$toUrl("/pages/Match/member/infomation");
- } else {
- this.$toUrl('/pages/login/login')
- }
- }
- },
- change(e) {
- this.current = e.index;
- this.tabsIndex = 0;
- this.page = 1;
- this.luntanPage = 1;
- if (e.index == 0) {
- this.classList = this.tabsTitle;
- this.getHeadlines();
- } else {
- this.classList = [
- { name: this.$t("news.popular") },
- { name: this.$t("news.follow") },
- ];
- this.getLuntan();
- }
- },
- // 轮播切换
- change1(e) {
- // console.log(e);
- this.swCurrent = e;
- },
- // 点击轮播
- detail(e) {
- // uni.navigateTo({
- // url:'./detail?id=' + this.HeadlinesList.banner[e].id
- // })
- console.log(e);
- },
- //获取头条列表
- getHeadlines() {
- this.status1 = "loading";
- uni.$u.http
- .get("/api/Headlines/getList", {
- params: { page: this.page, cid: this.classList[this.tabsIndex].id },
- })
- .then((res) => {
- // this.$db.set('system'.res.data)
- this.HeadlinesList = res;
- if (this.page == 1) {
- this.list = res.banner || [];
- this.Headlist.data = res.list.data;
- } else {
- this.Headlist.data = [...this.Headlist.data, ...res.list.data];
- }
- if (res.list.total > this.Headlist.data.length) {
- this.page++;
- this.status1 = "more";
- } else {
- this.status1 = "nomore";
- }
- }).finally(() => {
- if (this.animationLoaded) {
- return
- }
- this.animationLoaded = true
- this.$nextTick(() => {
- this.scrollFun()
- })
- })
- },
- stepBack() {
- uni.switchTab({
- url: '/pages/more/index'
- })
- }
- },
- };
- </script>
- <style lang="scss" scoped>
- .topic {
- color: #333;
- min-height: 100vh;
- padding-bottom: 130rpx;
- background-color: #f3f3f7;
- }
- .bar {
- background-color: #262E4A;
- height: 40px;
- font-weight: 500;
- font-size: 16px;
- padding: 0 16px;
- color: #fff;
- .u-icon {
- margin-right: 10px;
- }
- }
- .news-install {
- position: fixed;
- left: 0;
- right: 0;
- bottom: var(--window-bottom);
- z-index: 200;
- }
- .topip-tabs {
- font-weight: 500;
- font-size: 14px;
- color: #000;
- line-height: 1;
- background-color: #f3f3f7;
- image {
- width: 60rpx;
- height: 60rpx;
- // margin-left: ;
- }
- .ullist {
- // flex: 1;
- width: 100%;
- // overflow: auto;
- overflow-y: scroll;
- // padding-right: 100rpx;
- }
- .li-content {
- width: max-content;
- }
- .ulli {
- display: inline-block;
- // width: 100rpx;
- text-align: center;
- padding: 12px 16px;
- border-bottom: 2px solid transparent;
- }
- .active {
- border-bottom-color: #FF3300;
- }
- }
- .Community {
- overflow: hidden;
- padding: 0 24rpx;
- .tips {
- padding: 16rpx 20rpx;
- border-radius: 12rpx;
- background-color: white;
- margin-top: 22rpx;
- .t {
- color: $color2;
- padding: 14rpx 12rpx;
- border-radius: 12rpx;
- margin-right: 20rpx;
- border: 2rpx solid $color2;
- }
- }
- .hot {
- margin-top: 24rpx;
- border-radius: 12rpx;
- background-color: white;
- padding: 82rpx 0 20rpx 0;
- position: relative;
- .hot-title {
- color: #fff;
- width: 250rpx;
- height: 54rpx;
- padding-left: 12rpx;
- line-height: 54rpx;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
- background: url(/static/image/news/hot-title.png) center top / 100% 100%
- no-repeat;
- }
- .ul {
- overflow-x: scroll;
- .li {
- width: 254rpx;
- text-align: center;
- }
- image {
- width: 72rpx;
- height: 72rpx;
- margin-bottom: 16rpx;
- }
- }
- }
- .album {
- margin-top: 20rpx;
- padding: 32rpx 24rpx;
- border-radius: 12rpx;
- background-color: white;
- .types {
- width: fit-content;
- // display: inline-block;
- color: #e3ac72;
- font-size: 28rpx;
- margin-top: 24rpx;
- padding: 10rpx 16rpx;
- background-color: #fff1e0;
- border-radius: 6rpx;
- image {
- width: 32rpx;
- height: 32rpx;
- margin-right: 10rpx;
- }
- }
- .logo {
- width: 72rpx;
- height: 72rpx;
- border-radius: 50%;
- margin-right: 16rpx;
- }
- .nav {
- padding-top: 20rpx;
- }
- .album__content {
- position: relative;
- margin-top: 30rpx;
- image {
- border-radius: 10rpx;
- }
- .play {
- position: absolute;
- top: 40%;
- left: 50%;
- margin-left: -60rpx;
- width: 80rpx;
- height: 80rpx;
- }
- }
- .tabbar {
- margin-top: 22rpx;
- padding: 0 22rpx;
- image {
- width: 48rpx;
- height: 48rpx;
- }
- view {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- }
- }
- }
- }
- .topic-head {
- position: sticky;
- top: 0;
- // left: 0;
- // right: 0;
- z-index: 9;
- // padding: 0 200rpx;
- .header {
- position: relative;
- display: flex;
- align-items: center;
- padding-left: 20rpx;
- }
- .topic-avatar {
- // padding: 0 20rpx;
- // position: absolute;
- // top: 0;
- // left: 0;
- z-index: 999;
- }
- }
- .topic-swiper {
- position: relative;
- .topic-swiper-title {
- width: 90%;
- color: #fff;
- position: absolute;
- left: 24rpx;
- bottom: 20rpx;
- font-size: 28rpx;
- }
- .swiper {
- height: 60vw;
- }
- .loading-banner-img {
- display: block;
- width: 100%;
- height: 60vw;
- }
- }
- .topic-list {
- margin: 0 18rpx;
- padding: 0 24rpx;
- border-radius: 12rpx;
- background-color: white;
- .list-li {
- padding: 32rpx 0;
- border-bottom: 2rpx solid #f0f0f0;
- }
- .list-li-logo {
- width: 242rpx;
- height: 136rpx;
- margin-left: 32rpx;
- border-radius: 12rpx;
- }
- .loading-list-img {
- width: 242rpx;
- height: 136rpx;
- border-radius: 12rpx;
- }
- .list-li-left {
- flex: 1;
- display: flex;
- flex-wrap: wrap;
- height: 136rpx;
- image {
- width: 28rpx;
- height: 24rpx;
- margin-right: 8rpx;
- }
- .list-li-left-nav {
- color: #333;
- font-size: 32rpx;
- align-self: flex-start;
- }
- }
- .list-li-left-bot {
- width: 95%;
- font-size: 24rpx;
- // margin: 0 auto;
- margin-left: 20rpx;
- align-self: flex-end;
- text {
- color: #999;
- // margin-right: 32rpx;
- }
- view {
- text {
- color: #999;
- }
- }
- }
- }
- .topic-top {
- position: fixed;
- bottom: 192rpx;
- right: 32rpx;
- width: 96rpx;
- height: 96rpx;
- }
- .home {
- width: 80vw;
- .home-info {
- color: #fff;
- padding: 39rpx 29rpx;
- background: url(/static/image/match/home-bg.png) center top / 100% auto
- no-repeat;
- image {
- width: 120rpx;
- height: 120rpx;
- border-radius: 50%;
- margin-right: 24rpx;
- }
- view {
- font-weight: bold;
- }
- }
- .home-ui {
- overflow: hidden;
- margin: 0 28rpx;
- .home-li {
- color: #333;
- margin-top: 50rpx;
- image {
- width: 36rpx;
- height: 36rpx;
- margin-right: 17rpx;
- }
- }
- }
- .logout {
- height: 108rpx;
- background-color: #fff;
- margin: 80rpx 20rpx;
- line-height: 108rpx;
- color: #ff7b7f;
- }
- }
- </style>
|