vue如何利用flex布局实现TV端城市列表，下面web建站小编给大家详细介绍一下具体实现代码！template代码如下： js代码如下：import searchImage from "@/assets/search_focus.png"; import searchBackGroundImage from "@/assets/index-bg-qing.jpg"; import {hotCity} from '@/views/contsants'; import {ESLaunchManager} from "@extscreen/es-core"; export default { name: "city_list", props: { searchKeyWord: { type: String, default: '', }, focusTextColor: { type: String, default: '#000000' }, focusHotTextColor: { type: String, default: '#00EFFF' }, textColor: { type: String, default: '#FFFFFF' }, textFontSize: { type: String, default: '30px' }, textFontWeight: { type: Number, default: 400 }, focusBackground: { orientation: 'TL_BR',//TOP_BOTTOM,TR_BL, RIGHT_LEFT, BR_TL, BOTTOM_TOP,BL_TR,LEFT_RIGHT,TL_BR, cornerRadius: [40, 40, 40, 40], normal: ['#00000000', '#00000000'], focused: ['#F5F5F5', '#F5F5F5'], }, }, data() { return { pageLoading: false, text: 'search city', search: '', searchIcon: searchImage, searchImageData: searchBackGroundImage, searchTitle: "切换城市", searchDefaultKeyWord: '搜索', searchDefault: '请输入城市名称首字母或全拼', focusColor: '#f5f5f5', citySearchResult: "", hotCity: [], cityName: "", cityId: "", showHot: true, params: '', } }, activated() { }, deactivated() { this.resetModel() }, mounted() { this.hotCity = hotCity; this.showHot = true; this.pageLoading = true //弹出软键盘 this.$refs.searchInput.focus() //搜索框默认获取焦点 this.setHideLoading() }, methods: { setHideLoading() { setTimeout(() => { this.pageLoading = false }, 500) }, onFocus(e) { this.focused = e.isFocused; this.$emit("onButtonFocused", e.isFocused); }, //输入内容之后请求城市 endEditing(e) { console.log("--resultData--", this.citySearchResult) }, onBackPressed() { ESLaunchManager.finishESPage(); }, resetModel() { this.citySearchResult = ""; this.hotCity = []; this.pageLoading = false; this.searchTitle = ""; this.searchDefaultKeyWord = ""; this.searchDefault = ""; }, } } css代码如下：.index-root-search-view-css { width: 1920px; height: 1080px; background-color: transparent; } .search-background-view-css { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent; } .search-bar-root { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 140px; } .index-root-search-title-css { flex-direction: column; align-items: center; justify-content: center; margin-bottom: 40px; } .search-bar-root .search-bar { background-color: #ffffff; width: 1000px; height: 100px; display: flex; justify-content: center; border-radius: 8px; } .search-input { width: 780px; border-radius: 8px; font-size: 36px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #000000; margin-left: 40px; text-indent: 40px; } .index-root-search-image-view-css { position: absolute; width: 32px; height: 32px; top: 35px; bottom: 35px; right: 0; margin-right: 102px; text-align: center; } .index-root-search-flex-view-css { display: flex; flex-wrap: wrap; flex-direction: row; width: 1450px; margin-left: 245px; margin-right: 245px; margin-top: 40px; } .index-root-search-text-view-css { font-size: 30px; font-family: PingFangSC-Regular, PingFang SC; color: #000000; text-align: center; font-weight: 400; top: 0; bottom: 0; right: 0; position: absolute; margin-right: 30px; } .index-root-search-title-text-view-css { font-size: 70px; font-family: PingFangSC-Regular, PingFang SC; color: #ffffff; text-align: center; opacity: 1.0; } .search-city-button-view-css { width: 270px; height: 100px; background-color: rgba(0, 0, 0, .1); margin-right: 20px; margin-top: 40px; border-radius: 11px; border-width: 2px; border-color: rgba(255, 255, 255, 0.1); focus-background-color: #fff; } .search-city-button-view-css .city-sel-box { border-width: 2px; border-color: #32C5FF; } .icon-location-reactive { position: absolute; width: 26px; height: 34px; margin-left: 60px; margin-top: 30px; margin-bottom: 30px; } .icon-location { width: 26px; height: 34px; position: absolute; left: 0; top: 0; z-index: 9; } .search-city-hot-text-iew-css { width: 270px; height: 100px; background-color: rgba(50, 197, 255, 0.1); border-radius: 11px; border: 2px solid #32C5FF; font-size: 36px; font-family: PingFangSC-Regular, PingFang SC; text-align: center; color: white; } .search-city-empty { margin-top: 40px; width: 425px; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-left: 535px; } .search-city-empty .icon-no-connect { width: 425px; height: 307px; } .search-city-empty .empty-txt { font-size: 32px; font-family: PingFangSC-Light, PingFang SC; font-weight: 300; color: #FFFFFF; margin-top: 60px; }

大家好我是锦年，是跨境电商自媒体人，致力于tiktok的资讯分享。如今，tiktok在海外发展得如火如荼，许多小伙伴都跃跃欲试。近期tiktok出海短剧更是火爆欧美，达到了惊人的规模。今天，锦年就和大家聊聊“短剧出海，真的挣钱吗？” 横店变“竖店”——一个近期的热梗，也是今年短剧火爆的印证。随着“《哎呀！皇后娘娘来打工》24小时用户充值破1200万”“《闪婚后，傅先生马甲藏不住了》上线1天，充值破 2000 万 ”“《无双》上线8天，充值破亿 ”等消息的频繁刷新，小程序短剧“一周拍完、10天暴富 ”的神话不断在互联网传播。春风不止吹江南。在微短剧席卷国内市场时，许多微短剧平台也将视线转向海外市场，通过“文化输出 ”上头爽剧，做起海外“土味爱好者 ”的生意。尤其近来，国内微短剧监管政策日益趋严，出海更成为短剧这条快船渴望的新大陆。据外媒报道，中文在线旗下枫叶互动的短剧出海产品 ReelShort ，11月11日当天扣除支付应用商店费用后的净收入为45.9万美元，合人民币328万元，截至11月17日，其累计净收入已超过2200万美元，约合人民币1.6亿元。这样的掘金能力，甚至让A股都为之一振。11月8日收盘，中文在线、掌阅科技、天威视讯、欢瑞世纪等涨停；11月22日，短剧互动游戏板块大涨5.09%，中文在线涨逾10%，天威视讯、中广天择、引力传媒等多只个股涨停。截至11月24日收盘，中文在线11月市值暴涨146亿元。 图源：东方财富网资本市场上一路飘红的“短剧概念股”，以及内容层面“短剧出海、日入千万”的风声，让短剧出海成为年末内容行业最爆火的“分口”。无疑，这将吸引大量的资本和从业者涌入，只是，这个“风口”是否每一个进入者都能分一杯羹？01.“弄潮儿”追述短剧出海的故事，要回到两年之前。2021年底，优酷开始尝试开发并推出海外短剧，同年，快手海外版Kwai 也上线了微短剧品牌Telekwai。此外，腾讯视频和爱奇艺也逐渐增加了对海外市场的投入，发行一些短剧作品。在“优爱腾”的国际版App及YouTube、TikTok账号上，都有专供短剧的频道。然而这些先行者们，却并非如今的“弄潮儿”。谈到当前短剧出海的头部选手，上文提到过的ReelShort会是首先被想到的一个，在2022年8月正式上线后，主攻北美市场，前一段海外十分火爆的短剧《Fated To My Forbidden Alpha》就出自该平台。据SensorTower数据显示，今年7月ReelShort在GooglePlay和App Store的总下载量达190万次，月流水达600万美元，这一数据几乎与Netflix的月收益持平，11月更是一跃成为当前短剧出海赛道的头部玩家，在“双十一 ”期间甚至一度超过 TikTok，成为美国Apple Store上最热门的娱乐应用。风头正盛的海外短剧平台还有新阅时代旗下的GoodShort，不过上线较Reelshort晚了几乎一年。GoodShort主攻的是欧美、韩国市场，其发展路径也与ReelShort相似，早期主要是翻译国内短剧并上线，之后则采用当地班底进行筹备拍摄。网文平台安悦科技在2022年10月推出的Flex TV，则在南亚地区占据一定地位。推出一年多以来，Flex TV下载量长居泰国总榜Top50。据Sensor Tower数据显示，2023年7月，FlexTV在Google Play和AppStore的总下载量约为16万，月总流水约为50万美元。点众科技在今年4月上线的DramaBox和九州文化今年下半年先后推出的99TV、Short TV，还有今年7月畅读科技推出的MoboReels和与赤子城科技推出的Mini Episode，也具备一定影响力。不难发现，这一波出海竞赛中，迅速起势的头部选手，一类出自中文在线、安悦科技、新阅时代这样的网文出海头部公司，它们在网文出海市场根基深厚，庞大的网文储备成为短剧剧本的重要来源。比如枫叶互动，旗下有Kiss和Chapters两款小说产品，Chapters目前已经处于美国互动小说品类的第一梯队；安悦科技旗下的海外网文阅读App覆盖了10个语种，累积用户1000万；新阅时代旗下更是拥有GoodNovel、GoodFM、BueNovela、MegaNovel等多款海外小说APP。另外一类则是出自九州文化、点众科技等短剧制作公司，这两家都是国内小程序剧赛道的头部公司。 02.打法各不相同橘生淮南为橘，生淮北为枳。短剧也一样，出海后的受众以及商业模式都较国内发生了改变。此前DoNews从国内小程序短剧编剧玩纸那了解到，国内小程序短剧在男频上更容易出爆款，他们主要瞄准的是保安、快递小哥以及外卖员。而不同于国内小程序剧的主要受众是下沉市场用户，在欧美市场，中产阶层才是消费短剧的主力军，且女频更加受欢迎。据深响援引海外短剧从业者Leon，25岁到45岁之间的“宝妈族”是欧美市场的核心受众。受众的不同也影响了流行的题材。据Yeahmobi社媒营销高级运营经理June称，欧美市场短剧受众更喜欢如狼人、吸血鬼、豪门、奇幻等具有传统欧美形象的题材。而国内热门的“赘婿 ”“战神 ”等题材在海外反而“吃不开”。商业模式方面，国内和海外的产品有着本质的不同，国内小程序短剧产品就是短剧，而短剧出海后的产品其实是各大厂商推出的短剧App。图片来源：APP Growing在小程序这种“一次性”的平台上兜售的短剧，让用户花钱买剧即可。当产品变成App，商业化就有着更多的可能。以Reelshort为例，有看广告和付费两种方式，《Fated to My Forbidden Alpha》共60集，从第二集开始收费，每集66个金币（折合约人民币5元）解锁。如果不愿意花钱，还可以看广告解锁，不过观看次数有限定。此外像Goodshort还有订阅制，以及打赏和商务合作等。产品由短剧变成App，制作者们的目标也从如何让短剧内容抓住用户，转变成如何让App留住用户。据了解，短剧出海当前大致分为两种形式：第一种是将国内原有的视频进行翻译，再上传到应用或者第三方视频平台，也就是译制剧；第二种则是在当地搭建班底，邀请当地的演员，根据剧本拍摄更加贴合当地用户的短剧。不过，现在又出现了用AI拍出海短剧，即通过AI 换脸+换语言/口型，将一部国产短剧改变成为海外“面貌”，据称一部成本立省60万，但是并未改变剧情本质，只能算是更高级一点的译制剧。June分析，译制剧可以做到快速起量，短期内大量上新，前期投入成本较少，但由于地域、文化、喜好的不同，内容可能不被当地用户接受，不容易有爆款。搭建当地班底的定制剧就有利于快速破圈，形成一定的用户池，但是前期投入的成本较大，且拍摄、剪辑，后期调整的周期较长，导致上新速度相对较慢。比较来看，搭建当地班底的定制剧当然更家吸引用户，但如果上新频率太慢，就会影响用户留存。可要保持住一定的上新频率，资金上的投入肯定不会少。03.稳赚不赔，还是风险不小？尽管市场前景看似广阔，但未必所有入局者都能轻松“掘金”。深入了解国内付费短剧产业链后会发现，小程序短剧的成功，并不意味着它是一个轻松赚钱的生意。一天充值千万的短剧只是凤毛麟角，票房过亿的更是少之又少，再加上较高的投流成本，更是限制了小程序短剧整体市场的盈利能力。据嘉书科技的创始人王小书计算：“每1元微短剧票房中，大约有0.8-0.9元会用于支付广告费用。制片方通常只能获得大约0.1-0.15元，一千万的票房真正到手一百多万，还要覆盖几十万的拍摄成本。投流成本高，但爆款率不高。一年之中，也就只见一部《无双》，大约不到10%，这意味着只有10%的剧集能够回本，而90%的剧集都会亏损。”短剧出海也面临着同样的问题，市场上目前活跃的收入数据都来自ReelShort、GoodShort等头部平台，整体市场还有着太多未知的数据等待大家验证。再者，据 June表示，头部 App 也会在 Ins、Facebook、YouTube、TikTok 等渠道进行投放，导流至 App Store内。也就是说，选择本地化的社媒平台进行投流，对出海短剧曝光来说也是非常重要的一环。而嘉书科技负责人近期曾公开表示，不像国内投流比较简单，一部剧在海外通过Google和Facebook投放，周期较长，起量慢。这可能造成出海短剧的资金回流相对缓慢。另外，虽然国内短剧在监管之下，要面对内容是否合规的问题，但在海外，也需要考虑版权问题，一段背景音乐被查出侵权，就会致使被罚款甚至整个App下架。最后是市场方面，不同于国内小程序短剧由鸿蒙之态发展而来，短剧出海赛道由出海的网文公司或者短剧制作领域的头部公司把控，这也加大了后发选手脱颖而出的难度。短剧出海是国内短剧产业一次不错的商业探索，但无论是制作流程、运营逻辑乃至市场环境，海外相比国内都有了很多不同。虽然造富的神话满天飞，但真要入局，还是要谨慎再谨慎。关于tiktok出海短剧还有更多内容想要了解，欢迎找锦年交流。返回搜狐，查看更多
责任编辑：