Showing preview only (370K chars total). Download the full file or copy to clipboard to get everything.
Repository: jiaopianjun/social
Branch: master
Commit: 8bdcfc7bb9d2
Files: 123
Total size: 337.6 KB
Directory structure:
gitextract_ju9w_4mt/
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── README.md
├── build/
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ ├── webpack.prod.conf.js
│ └── webpack.test.conf.js
├── config/
│ ├── dev.env.js
│ ├── index.js
│ ├── prod.env.js
│ └── test.env.js
├── index.html
├── package.json
├── src/
│ ├── App.vue
│ ├── Index.vue
│ ├── SocialDetail.vue
│ ├── SocialIndex.vue
│ ├── SocialPost.vue
│ ├── components/
│ │ ├── DetailLi.vue
│ │ ├── Editor.vue
│ │ ├── EnlargePicture.vue
│ │ ├── IndexList.vue
│ │ ├── LoginPop.vue
│ │ ├── PeoInfo.vue
│ │ ├── SocialIndexAdmin.vue
│ │ ├── SocialIndexDetail.vue
│ │ ├── SocialIndexHeader.vue
│ │ ├── SocialIndexHot.vue
│ │ ├── SocialIndexList.vue
│ │ ├── SocialIndexRecommend.vue
│ │ ├── pagination.vue
│ │ └── rulePop.vue
│ ├── images/
│ │ ├── thumbnext.cur
│ │ └── thumbprev.cur
│ ├── main.js
│ ├── router/
│ │ └── index.js
│ └── sass/
│ ├── .sass-cache/
│ │ ├── 0fe03028bc734e8dfd487f4cec4f99c81c197bf9/
│ │ │ ├── SocialIndexHeader.scssc
│ │ │ ├── ie.scssc
│ │ │ ├── print.scssc
│ │ │ └── screen.scssc
│ │ ├── 75fcaf1b4852ceb732871195e41567cc2a7d8997/
│ │ │ └── C%058/
│ │ │ └── Ruby23-x64/
│ │ │ └── lib/
│ │ │ └── ruby/
│ │ │ └── gems/
│ │ │ └── 2.3.0/
│ │ │ └── gems/
│ │ │ └── compass-core-1.0.3/
│ │ │ └── stylesheets/
│ │ │ └── compass/
│ │ │ └── _reset.scssc
│ │ ├── 864dd71c7b880940ddbb1315c6bcb890fcda4522/
│ │ │ ├── IndexList.scssc
│ │ │ ├── LoginPop.scssc
│ │ │ ├── ScoialIndexRecommend - 副本.scssc
│ │ │ ├── ScoialIndexRecommend.scssc
│ │ │ ├── SocialDetail.scssc
│ │ │ ├── SocialIndexAdmin - 副本.scssc
│ │ │ ├── SocialIndexAdmin.scssc
│ │ │ ├── SocialIndexDetail.scssc
│ │ │ ├── SocialIndexHeader - 副本 (2).scssc
│ │ │ ├── SocialIndexHeader - 副本 (3).scssc
│ │ │ ├── SocialIndexHeader - 副本 (4).scssc
│ │ │ ├── SocialIndexHeader.scssc
│ │ │ ├── SocialIndexHot - 副本.scssc
│ │ │ ├── SocialIndexHot.scssc
│ │ │ ├── SocialIndexList - 副本.scssc
│ │ │ ├── SocialIndexList.scssc
│ │ │ ├── SocialPeoInfo - 副本.scssc
│ │ │ ├── SocialPeoInfo.scssc
│ │ │ ├── SocialPop.scssc
│ │ │ ├── SocialPost.scssc
│ │ │ ├── SocialPublic.scssc
│ │ │ ├── ie.scssc
│ │ │ ├── print.scssc
│ │ │ └── screen.scssc
│ │ ├── 8b1de0fb964996dfca872842620703baaa5efa9b/
│ │ │ └── _utilities.scssc
│ │ ├── c17044e14c0b02252815f0ff968911ec47c759ba/
│ │ │ └── _reset.scssc
│ │ └── dc83e2e3df60e99baa08ce8bd69dd4d9b8c8e386/
│ │ ├── ie.scssc
│ │ ├── print.scssc
│ │ └── screen.scssc
│ ├── config.rb
│ ├── sass/
│ │ ├── IndexList.scss
│ │ ├── LoginPop.scss
│ │ ├── ScoialIndexRecommend.scss
│ │ ├── SocialDetail.scss
│ │ ├── SocialIndexAdmin.scss
│ │ ├── SocialIndexDetail.scss
│ │ ├── SocialIndexHeader.scss
│ │ ├── SocialIndexHot.scss
│ │ ├── SocialIndexList.scss
│ │ ├── SocialPeoInfo.scss
│ │ ├── SocialPop.scss
│ │ ├── SocialPost.scss
│ │ ├── SocialPublic.scss
│ │ ├── ie.scss
│ │ ├── print.scss
│ │ └── screen.scss
│ └── stylesheets/
│ ├── IndexList.css
│ ├── LoginPop.css
│ ├── ScoialIndexRecommend.css
│ ├── SocialDetail.css
│ ├── SocialIndexAdmin.css
│ ├── SocialIndexDetail.css
│ ├── SocialIndexHeader.css
│ ├── SocialIndexHot.css
│ ├── SocialIndexList.css
│ ├── SocialPeoInfo.css
│ ├── SocialPop.css
│ ├── SocialPost.css
│ ├── SocialPublic.css
│ ├── ie.css
│ ├── print.css
│ └── screen.css
├── static/
│ └── .gitkeep
├── test/
│ ├── e2e/
│ │ ├── custom-assertions/
│ │ │ └── elementCount.js
│ │ ├── nightwatch.conf.js
│ │ ├── runner.js
│ │ └── specs/
│ │ └── test.js
│ └── unit/
│ ├── .eslintrc
│ ├── index.js
│ ├── karma.conf.js
│ └── specs/
│ └── Hello.spec.js
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
================================================
FILE: .editorconfig
================================================
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
================================================
FILE: .eslintignore
================================================
build/*.js
config/*.js
================================================
FILE: .eslintrc.js
================================================
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
test/unit/coverage
test/e2e/reports
selenium-debug.log
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
================================================
FILE: .postcssrc.js
================================================
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}
================================================
FILE: README.md
================================================
#### 前提
项目需求：建立一个平台能够提供给玩家交流的地方。
#### 功能需求
- 一个聚合页面，提供当前最新的帖子
- 个人模块：显示头像，个人昵称，个人已经加入的主题
- 热门讨论： 提供热门帖子
- 主题推荐
- 主题页面： 显示当前主题下 的帖子， 可提供 精华 攻略 等小标签的分类 可以 选择 时间 热门 进行排序
- 帖子页面： 显示 当前帖子的标签 如 官方 置顶 等。 同时分权限等级 可以 进行 置顶 删除等操作
- 评论： 可以对当前帖子进行评论，也可以对某条帖子进行评论，也可以回复其他评论者
- 帖子发表： 可以选择 帖子类型 标签等
#### 技术栈
Vue + Js + Sass + Css3 + Vue-resouse 等
#### 源码
[Github](https://github.com/jiaopianjun/social)
#### 项目地址
可以直接访问线上地址 [社区](http://stone.snail.com/social/index.html#/) 注册后 登录 即可 体验 发帖 回帖 等操作
#### 项目运行
- git clone https://github.com/jiaopianjun/social.git
- npm install
- npm run dev
#### 项目截图
================================================
FILE: build/build.js
================================================
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
================================================
FILE: build/check-versions.js
================================================
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
================================================
FILE: build/dev-client.js
================================================
/* eslint-disable */
'use strict'
require('eventsource-polyfill')
const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
================================================
FILE: build/dev-server.js
================================================
'use strict'
require('./check-versions')()
const config = require('../config')
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
const opn = require('opn')
const path = require('path')
const express = require('express')
const webpack = require('webpack')
const proxyMiddleware = require('http-proxy-middleware')
const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production')
? require('./webpack.prod.conf')
: require('./webpack.dev.conf')
// default port where dev server listens for incoming traffic
const port = process.env.PORT || config.dev.port
// automatically open browser, if not set will be false
const autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
const proxyTable = config.dev.proxyTable
const app = express()
const compiler = webpack(webpackConfig)
const devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
const hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: false,
heartbeat: 2000
})
// force page reload when html-webpack-plugin template changes
// currently disabled until this is resolved:
// https://github.com/jantimon/html-webpack-plugin/issues/680
// compiler.plugin('compilation', function (compilation) {
// compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
// hotMiddleware.publish({ action: 'reload' })
// cb()
// })
// })
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
const options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())
// serve webpack bundle output
app.use(devMiddleware)
// serve pure static assets
const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
const uri = 'http://localhost:' + port
var _resolve
var _reject
var readyPromise = new Promise((resolve, reject) => {
_resolve = resolve
_reject = reject
})
var server
var portfinder = require('portfinder')
portfinder.basePort = port
console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
portfinder.getPort((err, port) => {
if (err) {
_reject(err)
}
process.env.PORT = port
var uri = 'http://localhost:' + port
console.log('> Listening at ' + uri + '\n')
// when env is testing, don't need open it
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
server = app.listen(port)
_resolve()
})
})
module.exports = {
ready: readyPromise,
close: () => {
server.close()
}
}
================================================
FILE: build/utils.js
================================================
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
================================================
FILE: build/vue-loader.conf.js
================================================
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
}),
transformToRequire: {
video: 'src',
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
================================================
FILE: build/webpack.base.conf.js
================================================
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: 'index.js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.css$/, //这是注释掉的模块，一开始很疑惑加入css的编译模块马上就报错了，注释掉之后sass代码照样可以成功编译。
loader: ["vue-style-loader", "css-loader"]
},
{
test: /\.less$/,
loader: ["vue-style-loader", "css-loader", "less-loader"]
},
{
test: /\.(scss|sass)$/,
loader: ["node-sass", "vue-style-loader", "css-loader", "sass-loader"]
},
{
test: /\.scss/,
loaders: ['css', 'autoprefixer', 'sass'],
},
{
test: /\.(cur|png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(cur|mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(cur|woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
================================================
FILE: build/webpack.dev.conf.js
================================================
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
================================================
FILE: build/webpack.prod.conf.js
================================================
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: config.build.env
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vender modules does not change
new webpack.HashedModuleIdsPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
================================================
FILE: build/webpack.test.conf.js
================================================
'use strict'
// This is the webpack config used for unit tests.
const utils = require('./utils')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const webpackConfig = merge(baseWebpackConfig, {
// use inline sourcemap for karma-sourcemap-loader
module: {
rules: utils.styleLoaders()
},
devtool: '#inline-source-map',
resolveLoader: {
alias: {
// necessary to to make lang="scss" work in test when using vue-loader's ?inject option
// see discussion at https://github.com/vuejs/vue-loader/issues/724
'scss-loader': 'sass-loader'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/test.env')
})
]
})
// no need for app entry during tests
delete webpackConfig.entry
module.exports = webpackConfig
================================================
FILE: config/dev.env.js
================================================
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
================================================
FILE: config/index.js
================================================
'use strict'
// Template version: 1.1.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: process.env.PORT || 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}
================================================
FILE: config/prod.env.js
================================================
'use strict'
module.exports = {
NODE_ENV: '"production"'
}
================================================
FILE: config/test.env.js
================================================
'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"testing"'
})
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>社交圈子</title>
<meta name="keywords" content="大型,多人,游戏,Stone平台,蜗牛数字" />
<meta name="description" content="Stone游戏平台是由蜗牛游戏研发的首个专注精品PC游戏发行平台,致力于在全球范围内甄选精品PC游戏，为中国玩家们带来多样的佳作体验。Stone游戏平台为用户提供购买、下载、激活、社群等一系列游戏体验服务，定期引进正版游戏，倡导游戏就该玩好的" />
<meta name="copyright" content="Stone, Stone游戏平台，Stone游戏平台官网，Stone游戏平台下载，Stone游戏平台注册，Stone游戏平台礼包，蜗牛游戏平台，方舟，方舟生存进化，方舟国服，沙盒游戏" />
<link rel="stylesheet" type="text/css" href="http://www.iplaystone.com/static/cn/act/201711/lib/base.css">
<link rel="stylesheet" type="text/css" href="http://www.iplaystone.com/static/common/css/common.css">
<script src="http://www.iplaystone.com/static/cn/act/201711/lib/jquery.min.js"></script>
<script type="text/javascript" src="//www.iplaystone.com/static/common/js/custom/??/getter.js,common.js,header.js,footer.js"></script>
</head>
<body>
<div id="stone_header"></div>
<div id="app"></div>
<div id="stone_footer"></div>
<script>
var userAgent = navigator.userAgent
var isStone = false
var requestSource = ''
if(userAgent.search(/Stone/) == -1){//pc
isStone = false
stoneHeader.init(2)
requestSource = 'iplaystone'
}else{//stone
isStone = true
requestSource = 'stoneBrowser'
$("#stone_header,#stone_footer").remove()
}
</script>
</body>
</html>
================================================
FILE: package.json
================================================
{
"name": "yes",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "PhotoFilm <pianjiao@gmail.com>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "npm run dev",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"vue": "^2.4.2",
"vue-router": "^2.7.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.3",
"webpack-bundle-analyzer": "^2.9.0",
"cross-env": "^5.0.1",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"mocha": "^3.2.0",
"chai": "^4.1.2",
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"inject-loader": "^3.0.0",
"babel-plugin-istanbul": "^4.1.1",
"phantomjs-prebuilt": "^2.1.14",
"chromedriver": "^2.27.2",
"cross-spawn": "^5.0.1",
"nightwatch": "^0.9.12",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^13.0.4",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.4.2",
"portfinder": "^1.0.13",
"webpack": "^3.6.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.18.2",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
================================================
FILE: src/App.vue
================================================
<template>
<div id="app" class="app clearfix">
<input type="hidden" id="pdLogin" value="sdd"/>
<router-view :key="key"></router-view>
</div>
</template>
<script>
// import statistics from 'http://static.snail.com/js/stone/v2/statistics_ty_v2.source.js'
export default {
name: 'app',
computed: {
key () {
return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
}
},
mounted () {
const s = document.createElement('script')
s.type = 'text/javascript'
s.src = 'http://static.snail.com/js/stone/v2/statistics_ty_v2.source.js'
document.body.appendChild(s)
},
created: function () {
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/user/info',
method: 'jsonp',
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.data.code === 200) {
document.getElementById('pdLogin').value = 'true'
} else {
document.getElementById('pdLogin').value = 'false'
}
})
}
}
</script>
<style >
@import './sass/stylesheets/SocialPublic.css'
</style>
================================================
FILE: src/Index.vue
================================================
<template>
<div id="Index" class="Index">
<div class="SocialIndexMain clearfix">
<div class="MainList fl bgWhite">
<IndexList></IndexList>
</div>
<div class="MainMoudle fr" id="MainMoudle">
<PeoInfo :showMoreMyCircle.sync="showMoreMyCircle"></PeoInfo>
<SocialIndexHot></SocialIndexHot>
<SocialIndexRecommend></SocialIndexRecommend>
<span class="goTop cur" v-show="isGoTop" @click="goTop()" style="bottom:145px;"></span>
</div>
</div>
<LoginPop :ispop.sync="ispop"></LoginPop>
</div>
</template>
<script>
import PeoInfo from './components/PeoInfo.vue'
import LoginPop from './components/LoginPop.vue'
import SocialIndexHot from './components/SocialIndexHot.vue'
import IndexList from './components/IndexList.vue'
import SocialIndexRecommend from './components/SocialIndexRecommend.vue'
export default {
name: 'SocialIndex',
components: {
LoginPop: LoginPop,
PeoInfo: PeoInfo,
SocialIndexHot: SocialIndexHot,
IndexList: IndexList,
SocialIndexRecommend: SocialIndexRecommend
},
data () {
return {
HdInfoData: {},
isShow: false,
scrolled: false,
isSiH: true,
circleId: '',
isGoTop: false,
showMoreMyCircle: true,
ispop: true
}
},
ready () {
window.addEventListener('scroll', this.handleScroll)
},
methods: {
goTop: function () {
var gotoTop = function () {
var currentPosition = document.documentElement.scrollTop || document.body.scrollTop
currentPosition -= 80
if (currentPosition > 0) {
window.scrollTo(0, currentPosition)
} else {
window.scrollTo(0, 0)
clearInterval(timer)
timer = null
}
}
var timer = setInterval(gotoTop, 50)
},
handleScroll () {
this.scrolled = window.scrollY
// if (this.scrolled > 180) {
// document.getElementById('IndexListType').style.position = 'fixed'
// } else {
// document.getElementById('IndexListType').style.position = 'static'
// }
if (this.scrolled > 900) {
this.isShow = true
this.isGoTop = true
document.getElementById('SocialIndexRecommend').classList.add('fixed3')
document.getElementById('PeoInfo').classList.add('hfixed')
} else if (this.scrolled < 800) {
document.getElementById('PeoInfo').classList.remove('hfixed')
document.getElementById('SocialIndexRecommend').classList.remove('fixed3')
this.isShow = false
this.isGoTop = false
this.showMoreMyCircle = true
}
if (document.documentElement.clientHeight < 700) {
this.isGoTop = false
}
}
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},
created: function () {
this.circleId = this.$route.params.circleId
window.addEventListener('scroll', this.handleScroll)
}
}
</script>
<style>
</style>
================================================
FILE: src/SocialDetail.vue
================================================
<template>
<div id="SocialDetail" class="SocialDetail">
<div class="MainList fl" id="MainList">
<div class="ListPage Page-Top bgWhite">
<pagination :cur.sync="cur" :all.sync="all" :isJump.sync="isJump" @listen="monitor"></pagination>
<router-link class="goBack cur" :to="{ name: 'circle', params: {'circleId':circleId}}" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="previous_page" wn_tj_click_id><img src="./images/icon14.png"/>返回{{HdInfoData.name}}</router-link>
</div>
<div class="ListCont">
<div class="Jtitle bgWhite" id="Jtitle">
<h5 class="textOverFlow" :data-tzId="DetailLandlord.id" :title="DetailLandlord.title">{{DetailLandlord.title}}</h5>
<span :class="['icon-gf',{'none':DetailLandlord.is_official == 0}]" title="官方" v-if="DetailLandlord.is_official !== 0">官方</span>
<span :class="['icon-top',{'none':DetailLandlord.is_top == 0}]" v-if="DetailLandlord.is_top !== 0" title="置顶">置顶</span>
<span class="icon-good" v-for="tags in DetailLandlord.public_tags" :title="tags.name" :class="tags.mark">{{tags.text}}</span>
<div class="Jtitle-Moudle fr">
<span @click="onLandlord(1)" :class="{onLandlord:DetailLandlord.onLandlord === true}">只看楼主</span>
<span @click="goBottom()"><img src="./images/icon6.png"/>回复</span>
</div>
</div>
<ul class="ListContUl">
<li :class="['clearfix bgWhite ListContUlLi',{'isSelf':DetailLandlord.is_self === true}]" v-show="isOne" :data-id="DetailLandlord.id">
<img src="./images/lz.png" class="user-lz"/>
<div class="Jitems">
<div class="JitemsLeft fl">
<div class="J-UserInfo">
<div class="J-UserInfo-Pic"><img :src="DetailLandlord.user_photo" :alt="DetailLandlord.user_nickname"/></div>
<span class="J-UserInfo-Name textOverFlow" :title="DetailLandlord.user_nickname">{{DetailLandlord.user_nickname}}</span>
<span class="J-UserInfo-adminCall" v-show="DetailLandlord.is_post_by_admin">管理员</span>
</div>
</div>
<div class="JitemsRight fr">
<div class="J-TextCont" v-html="DetailLandlord.content"></div>
<div :class="['J-ClickUp',{'J-On' : DetailLandlord.is_voted === true}]" @click="ListVote(DetailLandlord.id)" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="praise_starter" :wn_tj_click_id="DetailLandlord.id">
<p></p>
<p>{{DetailLandlord.lick_count}}</p>
</div>
<div class="J-Modle clearfix">
<div class="J-Modle-Hd">
<div class="Hd-Floor fl"><span>楼主</span>{{DetailLandlord.created_at}}</div>
<div class="Hd-Moudle fr">
<ol>
<li v-if="DetailLandlord.is_admin">
<span class="PostManagement" @click="showPostManage()">帖子管理<i :class="{'rotate':isPostManage === true}"></i></span>
<div class="adminlist" v-show="isPostManage">
<p class="cur" @click="isAdmin(0)" id="isTop">{{DetailLandlord.is_top == 0 ? '置顶':'取消置顶'}}</p>
<p class="cur" @click="isAdmin(1)">{{DetailLandlord.public_tags === undefined || DetailLandlord.public_tags.length === 0 ? '加精' : '取消加精'}}</p>
<p class="cur" @click="isAdmin(4)" v-if="DetailLandlord.auth_level == 1">{{DetailLandlord.is_official == 0 ? '设为官方贴':'取消官方贴'}}</p>
<p class="cur" @click="isAdmin(5)" v-if="DetailLandlord.auth_level == 1 && DetailLandlord.is_faq == true && DetailLandlord.is_faq_setup === false">设为FAQ</p>
</div>
</li>
<li v-show="DetailLandlord.delete_private"><span class="Hd-Moudle-Del" @click="isAdmin(2)">删除</span></li>
<li v-show="!DetailLandlord.delete_private" v-if="false"><span class="Hd-Moudle-Report">举报</span></li>
<li @click="goBottom()"><span class="Hd-Moudle-Reply">回复</span></li>
</ol>
</div>
</div>
</div>
</div>
</div>
</li>
<li :class="['clearfix bgWhite ListContUlLi',{'isSelf':list.is_self === true}]" v-for="(list , temp) in DetailList" :data-listId="list.id" v-if="list.is_display" :name="list.id">
<a :name="list.id"></a>
<img src="./images/lz.png" class="user-lz" v-show="list.is_owner"/>
<div class="Jitems">
<div class="JitemsLeft fl">
<div class="J-UserInfo">
<div class="J-UserInfo-Pic"><img :src="list.user_photo" :alt="list.user_nickname"/></div>
<span class="J-UserInfo-Name textOverFlow" :title="list.user_nickname" :data-userid="list.user_id">{{list.user_nickname}}</span>
<span class="J-UserInfo-adminCall" v-show="list.is_post_by_admin">管理员</span>
</div>
</div>
<div class="JitemsRight fr">
<div class="J-TextCont" v-html="list.content"></div>
<div class="J-Modle clearfix">
<div class="J-Modle-Hd">
<div class="Hd-Floor fl"><span>{{list.position}}楼</span>{{list.created_at}}</div>
<div class="Hd-Moudle fr">
<ol>
<li v-show="list.delete_private" @click="isAdmin(3, list.id)"><span class="Hd-Moudle-Del">删除</span></li>
<li v-show="!list.delete_private" v-if="false"><span class="Hd-Moudle-Report">举报</span></li>
<li v-if="true">
<span class="Hd-Moudle-Reply" v-show="list.isReplay" @click="ShowMoudleList(temp, list.reply_num, list.id)">回复<b v-if="list.reply_num > 0">（{{list.reply_num}}）</b></span>
<span class="Hd-Moudle-Reply" v-show="!list.isReplay" @click="HideMoudleList(temp)">收起回复<b v-if="list.reply_num > 0">（{{list.reply_num}}）</b></span>
</li>
<li><span :class="['Hd-Moudle-Praise',{'Hd-Moudle-Praise-On' : list.is_voted === true}]" @click="CommentVote(list.id, temp, list.is_voted)" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="praise_responder" :wn_tj_click_id="DetailLandlord.id">{{list.like_num}}</span></li>
</ol>
</div>
</div>
<div class="J-Moudle-List" v-show="!list.isReplay">
<div class="J-Moudle-List-Cont clearfix">
<ul class="J-Moudle-List-Cont-Ul" v-if="list.reply_num > 0">
<li class="J-Moudle-List-Cont-Li" v-for="(Mlist, Mtemp) in list.replies" :data-repliesId="Mlist.id">
<div class="Jmoude-items clearfix">
<div class="Jmoude-items-Pic fl"><img :src="Mlist.user_photo" :alt="Mlist.user_nickname"/></div>
<div class="Jmoude-items-Cont fr">
<div class="Jmoudle-items-h5">
<span><a href="javascript:;" :data-hfrId="Mlist.user_id">{{Mlist.user_nickname}}：</a><b style="float:left">{{ Mlist.to_user_id !== Mlist.comment_user_id ? '回复' : '' }} </b><a href="javascript:;" v-if="Mlist.to_user_id != Mlist.comment_user_id" :data-atrId="Mlist.to_user_id" class="twouser" >{{Mlist.to_user_nickname}}：</a>{{Mlist.content}}</span>
</div>
<div class="Jmoudle-items-info">
<span class="fl">{{Mlist.created_at}}</span>
<span class="fr cur" :data-userId="(Mlist.user_id)" :data-commentUserId="(Mlist.comment_user_id)" @click="JMoudleReply(Mlist.id, Mlist.comment_id, Mlist.user_nickname, temp, $event, list.id)">回复</span>
</div>
</div>
</div>
</li>
</ul>
<div class="J-Moudle-List-Cont-Jet">
<span class="J-Moudle-List-More fl cur" v-show="list.reply_num > 5 && list.more === true" @click="showMore(list.id, 1, 10, temp)">查看更多</span>
<div class="J-Moudle-Page fl" v-show="list.reply_num > 5 && list.more === false">
<ul>
<li><a :class="setButtonClass(0,temp)" @click="prvePage(list.current,list.id,temp)"><img src="./images/prev.png" alt="<"/></a></li>
<li v-for="(flag,i) in list.allpage" :class="[{ active: list.current === flag },{point:flag < 1}]" :data-flag="flag" :data-cur="list.current">
<a @click="btnClick(flag,temp,list.id)">{{ flag < 1 ? "..." : flag }}</a>
</li>
<li class="next"><a :class="setButtonClass(1,temp)" @click="nextPage(list.current,list.all,list.id,temp)"><img src="./images/next.png" alt=">"/></a></li>
</ul>
</div>
<div class="J-Moudle-Mebtn fr cur" :data-listId="list.id" :data-listUserId="list.user_id" @click="JReply(list.id, temp)">我也说一句</div>
</div>
</div>
<div class="J-Moudle-List-Input" v-show="list.isMoudleListInput">
<div class="J-Moudle-List-Input-Box">
<input type="text" :placeholder="list.UserNickName" :id="'J'+list.id" maxLength="150" autofocus="autofocus"/>
</div>
<div class="J-Moudle-List-Input-Set">
<div class="J-M-l-I-S-Icon cur fl" v-if="false">
<img src="./images/icon13.png"/>
<div class="Icon-List none"></div>
</div>
<span class="J-M-L-Btn cur fr" @click="postComment(list.id, temp)" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="reply_responder" :wn_tj_click_id="list.id">发表</span>
</div>
<!--Login Mask-->
<div class="loginMask" v-if="!isLogin">
<div class="loginMaskBox">
<a href="javascript:;" @click="detailLogin()">登录</a>
<a href="javascript:;" class="loginMaskBoxline"></a>
<a href="http://www.iplaystone.com/static/web/register.html">注册</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="ListPage Page-Bootom">
<pagination :cur.sync="cur" :all.sync="all" :isJump.sync="isJump" @listen="monitor"></pagination>
<router-link class="goBack cur" :to="{ name: 'circle', params: {'circleId':circleId}}" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="previous_page" wn_tj_click_id><img src="./images/icon14.png"/>返回{{HdInfoData.name}}</router-link>
</div>
<div class="LidtEditor bgWhite" id="LidtEditor">
<div class="Editor">
<div id="editorElem" style="text-align:left">
</div>
<span class="errts" id="postErrts" v-show="iSerrts"></span>
<span class="PostHtml cur" @click="" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="reply_starter" :wn_tj_click_id="DetailLandlord.id" id="PostHtml">发表</span>
</div>
<div class="loginMask" v-if="!isLogin">
<p>游客不能回复哦~</p>
<div class="loginMaskBox">
<a href="javascript:;" @click="detailLogin()">登录</a>
<a href="javascript:;" class="loginMaskBoxline"></a>
<a href="http://www.iplaystone.com/static/web/register.html">注册</a>
</div>
</div>
</div>
</div>
<div class="MainMoudle fr" id="MainMoudle">
<SocialIndexHeader :HdInfoData.sync="HdInfoData" :isSiH.sync="isSiH" id="MainMoudle"></SocialIndexHeader>
<SocialIndexHot></SocialIndexHot>
<SocialIndexRecommend id ="SocialIndexRecommend"></SocialIndexRecommend>
<span class="goTop cur" v-show="isGoTop" @click="goTop()"></span>
</div>
<rulePop :isPopInfo="isPopInfo" :DetailLandlord="DetailLandlord" :cur="cur" @abc="delComment"></rulePop>
<div class="divmask a" v-show="isPostManageMask" @click="closeMask"></div>
</div>
</template>
<script>
import SocialIndexHeader from './components/SocialIndexHeader.vue'
import SocialIndexAdmin from './components/SocialIndexAdmin.vue'
import SocialIndexHot from './components/SocialIndexHot.vue'
import SocialIndexDetail from './components/SocialIndexDetail.vue'
import SocialIndexRecommend from './components/SocialIndexRecommend.vue'
import pagination from './components/pagination.vue'
import rulePop from './components/rulePop.vue'
import E from 'wangeditor'
// import statistics from 'http://static.snail.com/js/stone/v2/statistics_ty_v2.source.js'
export default {
name: 'SocialDetail',
components: {
SocialIndexHeader: SocialIndexHeader,
SocialIndexAdmin: SocialIndexAdmin,
SocialIndexHot: SocialIndexHot,
SocialIndexDetail: SocialIndexDetail,
SocialIndexRecommend: SocialIndexRecommend,
pagination: pagination,
rulePop: rulePop
// statistics: statistics
},
watch: {
DetailList: {
handler: function (val, oldval) {
// console.log(val)
}
},
cur: {
handler: function (val, oldval) {
this.cur = val
console.log(this.cur)
}
},
editorContent: {
handler: function (val, oldval) {
console.log(val, 'val')
}
}
},
ready () {
this.requestData()
window.addEventListener('scroll', this.handleScroll)
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},
data () {
return {
circleId: '',
postId: '',
HdInfoData: {},
DetailLandlord: [],
DetailList: [],
isSiH: false,
cur: '',
all: 1,
Pagesize: 10,
isJump: true,
listId: '',
userId: '',
content: '',
username: '',
isOne: true,
isOnLandlord: 0,
editorContent: '',
scrolled: '',
isGoTop: false,
isPostManage: false,
isPostManageMask: false,
iSerrts: false,
isPopInfo: {
isPopShow: false,
isPopTsShow: 0,
isMaskShow: false,
commentId: ''
},
isLogin: false
}
},
methods: {
ShowLoginPop: function () {
document.getElementById('login_pop').style.display = 'block'
document.getElementById('stone_mask').style.display = 'block'
},
detailLogin: function () {
if (document.getElementById('pdLogin').value === 'true') {
} else {
this.ShowLoginPop()
}
// window.location.href = 'http://www.iplaystone.com/static/web/login.html?history=' + encodeURIComponent(window.location.href)
},
isAdmin: function (temp, data) { // 删除 置顶 加精
this.isPopInfo.isMaskShow = true
this.isPopInfo.isPopShow = true
this.isPostManageMask = false
this.isPostManage = false
if (temp === 0) { // 置顶
this.isPopInfo.isPopTsShow = 0
} else if (temp === 1) { // 加精
this.isPopInfo.isPopTsShow = 1
} else if (temp === 2) { // 删除主贴
this.isPopInfo.isPopTsShow = 2
} else if (temp === 3) { // 删除评论
this.isPopInfo.isPopTsShow = 3
this.isPopInfo.commentId = data
} else if (temp === 4) { // 官方贴
this.isPopInfo.isPopTsShow = 4
} else if (temp === 5) { // FAQ贴
this.isPopInfo.isPopTsShow = 5
}
},
closeMask: function () {
this.isPostManage = false
this.isPostManageMask = false
},
showPostManage: function () { // 显示管理列表
if (this.isPostManage === false) {
this.isPostManage = true
this.isPostManageMask = true
} else {
this.isPostManage = false
this.isPostManageMask = false
}
},
handleScroll: function () {
const windheight = window.innerHeight
this.scrolled = window.scrollY
// console.log(this.scrolled, windheight)
if (this.scrolled > windheight - windheight / 2) {
document.getElementById('Jtitle').style.position = 'fixed'
} else {
document.getElementById('Jtitle').style.position = 'static'
}
if (this.scrolled > windheight + 250) {
this.isShow = true
this.isGoTop = true
document.getElementById('SocialIndexRecommend').classList.add('fixed2')
document.getElementById('MainMoudle').children[0].classList.add('hfixed')
} else if (this.scrolled < 800) {
document.getElementById('MainMoudle').children[0].classList.remove('hfixed')
document.getElementById('SocialIndexRecommend').classList.remove('fixed2')
this.isShow = false
this.isGoTop = false
}
if (document.documentElement.clientHeight < 700) {
this.isGoTop = false
}
},
delComment: function (commentId) { // 删除评论
this.monitor(this.cur)
},
getContent: function (text) { // 发送评论
var _this = this
document.getElementsByClassName('w-e-text')[0].blur()
if (text !== '') {
// setTimeout(function () {
// document.getElementsByClassName('w-e-text')[0].focus()
// _this.postHtml(_this.postId, _this.editorContent)
// }, 10)
_this.postHtml(_this.postId, text)
// console.log(_this.editor.txt.html())
}
},
postHtml: function (postId, editorContent) {
// console.log(editorContent)
var vm = this
vm.$http.post('//moment.snail.com/api/v1/comment/comment', {
post_id: postId,
content: editorContent
},
{emulateJSON: true}).then((res) => {
if (res.data.code === 200) {
this.monitor(this.all)
document.getElementById('postErrts').style.display = 'none'
document.getElementsByClassName('w-e-text')[0].innerHTML = '<p><br/></p>'
this.editorContent = 'no'
this.goBottom()
} else {
document.getElementById('postErrts').style.display = 'inline-block'
document.getElementById('postErrts').innerHTML = res.data.message
}
}, (error) => { console.log(error) })
},
goBottom: function () {
const windheight = document.documentElement.scrollHeight
const gotoTop = function () {
var currentPosition = document.documentElement.scrollTop || document.body.scrollTop
currentPosition += 120
if (currentPosition < windheight - 1600) {
window.scrollTo(0, currentPosition)
} else {
window.scrollTo(0, windheight)
clearInterval(timer)
timer = null
}
}
var timer = setInterval(gotoTop, 20)
},
goTop: function () {
const gotoTop = function () {
var currentPosition1 = document.documentElement.scrollTop || document.body.scrollTop
currentPosition1 -= 80
if (currentPosition1 > 0) {
window.scrollTo(0, currentPosition1)
} else {
window.scrollTo(0, 0)
clearInterval(timer)
timer = null
}
}
var timer = setInterval(gotoTop, 50)
},
onLandlord: function (flag) { // 只看楼主
if (this.DetailLandlord['onLandlord'] === true) {
this.DetailLandlord['onLandlord'] = false // 全部
this.isOnLandlord = 0 // 只看楼主按钮标识
this.cur = 1 // 切换分页为第一页
this.isOne = true // 将楼主信息显示
this.LoadHtml(1, 0)
} else { // 只看楼主
this.DetailLandlord['onLandlord'] = true
this.isOnLandlord = 1
this.cur = 1
this.isOne = true
this.LoadHtml(1, 1)
}
},
monitor: function (data) { // 分页
this.cur = data
this.LoadHtml(data, this.isOnLandlord)
if (data > 1) {
this.isOne = false // 第二页 楼主不现实
} else {
this.isOne = true
}
},
ShowMoudleList: function (temp, num, commentUserId) { // 显示评论列表
this.DetailList[temp]['isMoudleListInput'] = true
this.DetailList[temp]['isReplay'] = false
this.DetailList[temp]['UserNickName'] = ''
this.DetailList[temp]['listId'] = commentUserId
this.DetailList[temp]['userId'] = ''
},
HideMoudleList: function (temp) { // 关闭评论列表
this.DetailList[temp]['isReplay'] = true
this.DetailList[temp]['UserNickName'] = ''
this.DetailList[temp]['isMoudleListInput'] = false
},
JMoudleReply: function (userId, commentUserId, userNickName, temp, event, id) { // 回复
if (document.getElementById('pdLogin').value === 'true') {
this.DetailList[temp]['isMoudleListInput'] = true
this.DetailList[temp]['UserNickName'] = '回复：' + userNickName
this.DetailList[temp]['listId'] = commentUserId
this.DetailList[temp]['userId'] = userId
setTimeout(function () {
document.getElementById('J' + id).focus()
}, 200)
// console.log(event.currentTarget.getBoundingClientRect().top)
// console.log(document.documentElement.scrollTop)
// var top = 0
// top = document.documentElement.scrollTop + event.currentTarget.getBoundingClientRect().top - 400
// window.scrollTo(0, top)
} else {
this.ShowLoginPop()
}
},
JReply: function (commentUserId, temp) { // 我也说一句
this.DetailList[temp]['isMoudleListInput'] = true
this.DetailList[temp]['UserNickName'] = ''
this.DetailList[temp]['listId'] = commentUserId
this.DetailList[temp]['userId'] = ''
setTimeout(function () {
document.getElementById('J' + commentUserId).focus()
}, 200)
},
CommentVote: function (commentId, temp, isVote) { // 评论投票
if (document.getElementById('pdLogin').value === 'true') {
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/comment/vote',
method: 'jsonp',
params: {
'comment_id': commentId
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.body.operation === 'minus') {
this.DetailList[temp]['is_voted'] = false
this.DetailList[temp]['like_num'] = this.DetailList[temp]['like_num'] - 1
} else if (res.body.operation === 'plus') {
this.DetailList[temp]['is_voted'] = true
this.DetailList[temp]['like_num'] = this.DetailList[temp]['like_num'] + 1
}
})
} else {
this.ShowLoginPop()
}
},
ListVote: function (PostId) { // 楼主贴投票
if (document.getElementById('pdLogin').value === 'true') {
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/post/vote',
method: 'jsonp',
params: {
'post_id': PostId
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
this.RefreshHdInfo()
})
} else {
this.ShowLoginPop()
}
},
LoadHtml: function (data, flag) { // 刷新HTML 只看楼主
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/comment/list',
method: 'jsonp',
params: {
'post_id': this.postId,
'page': data,
'only_owner': flag
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
for (var i in res.data.list) {
res.data.list[i]['UserNickName'] = ''
res.data.list[i]['isMoudleListInput'] = false
res.data.list[i]['more'] = true
if (res.data.list[i].reply_num > 0) {
res.data.list[i]['isReplay'] = false
} else {
res.data.list[i]['isReplay'] = true
}
if (res.data.list[i].replies !== undefined) {
if (res.data.list[i].replies.length > 0) {
res.data.list[i].replies = res.data.list[i].replies.splice(0, 5)
}
}
}
this.DetailList = res.data.list
this.all = res.data.totalPage
if (res.data.totalPage === 0) {
this.all = 1
}
})
},
RefreshHdInfo: function () { // 刷新楼主投票
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/post/detail-of-circle-post',
method: 'jsonp',
params: {
'post_id': this.postId
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.data.code === 200) {
this.DetailLandlord = res.data.info
this.DetailLandlord['onLandlord'] = false
} else if (res.data.code === 404) {
var url = 'http://stone.snail.com/error/404.html?from=circle&type=1&circleId=' + this.circleId
window.location.href = url
}
})
},
showMore: function (commentid, page, pagesize, temp) { // 显示评论列表
var _this = this
_this.$http({
url: '//moment.snail.com/api/v1/reply/list',
method: 'jsonp',
params: {
'comment_id': commentid,
'page': page,
'pagesize': pagesize
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.body.code === 200) {
_this.DetailList[temp]['replies'] = res.body.list
_this.DetailList[temp]['current'] = page
_this.DetailList[temp]['more'] = false
_this.DetailList[temp]['allpage'] = res.body.totalPage
}
})
},
// 页码点击事件
btnClick: function (current, index, postId) {
if (current < 1) return
if (current !== this.DetailList[index].current) {
this.DetailList[index].current = current
this.showMore(postId, current, 10, index)
// var top = 0
// top = document.documentElement.scrollTop + event.currentTarget.getBoundingClientRect().top - 430
// window.scrollTo(0, top)
}
},
// 下一页
nextPage: function (current, allpage, postId, index) {
if (current >= allpage) return
this.btnClick(current + 1, index, postId)
// var top = 0
// top = document.documentElement.scrollTop + event.currentTarget.getBoundingClientRect().top - 430
// window.scrollTo(0, top)
},
// 上一页
prvePage: function (current, postId, index) {
if (current <= 1) return
this.btnClick(current - 1, index, postId)
},
// 设置按钮禁用样式
setButtonClass: function (isNextButton, index) {
if (isNextButton) {
return this.DetailList[index].current >= this.DetailList[index].allpage ? 'page-button-disabled' : ''
} else {
return this.DetailList[index].current <= 1 ? 'page-button-disabled' : ''
}
},
postComment: function (id, temp) { // 发表评论
var vm = this
var content = document.getElementById('J' + id).value
if (!content) return
vm.$http({
url: '//moment.snail.com/api/v1/reply/reply',
method: 'jsonp',
params: {
comment_id: this.DetailList[temp].listId,
to_reply_id: this.DetailList[temp].userId,
content: content
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.data.code === 200) {
this.showMore(id, 1, 10, temp)
document.getElementById('J' + id).value = ''
this.DetailList[temp].reply_num = this.DetailList[temp].reply_num + 1
}
})
}
},
computed: {
indexs: function () {
var left = 1
var right = this.all
var ar = []
if (this.all >= 11) {
if (this.curIndex > 5 && this.curIndex < this.all - 4) {
left = this.curIndex - 5
right = this.curIndex + 4
} else {
if (this.curIndex <= 5) {
left = 1
right = 10
} else {
right = this.all
left = this.all - 9
}
}
}
while (left <= right) {
ar.push(left)
left++
}
if (ar[ar.length - 1] < this.all) {
ar[ar.length - 1] = this.all
ar[ar.length - 2] = 0
}
return ar
}
},
created: function () {
this.postId = this.$route.params.postId
this.circleId = this.$route.params.circleId
this.cur = this.$route.params.onPage
window.addEventListener('scroll', this.handleScroll)
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/circle/info',
method: 'jsonp',
params: {
'circle_id': this.circleId
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
this.HdInfoData = res.data.info
})
vm.$http({
url: '//moment.snail.com/api/v1/user/info',
method: 'jsonp',
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.data.code === 200) {
this.isLogin = true
} else {
this.isLogin = false
}
})
vm.$http({
url: '//moment.snail.com/api/v1/post/detail-of-circle-post',
method: 'jsonp',
params: {
'post_id': this.postId
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.data.code === 200) {
res.data.info.public_tags_length = res.data.info.public_tags.length
this.DetailLandlord = res.data.info
// console.log(this.DetailLandlord)
this.DetailLandlord['onLandlord'] = false
} else if (res.data.code === 404) {
var url = 'http://stone.snail.com/error/404.html?from=circle&type=1&circleId=' + this.circleId
window.location.href = url
}
})
vm.$http({
url: '//moment.snail.com/api/v1/comment/list',
method: 'jsonp',
params: {
'post_id': this.postId,
'page': this.cur,
'only_owner': 0
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
for (var i in res.data.list) {
res.data.list[i]['UserNickName'] = ''
res.data.list[i]['isMoudleListInput'] = false
res.data.list[i]['more'] = true
if (res.data.list[i].reply_num > 0) {
res.data.list[i]['isReplay'] = false
} else {
res.data.list[i]['isReplay'] = true
}
if (res.data.list[i].replies !== undefined) {
if (res.data.list[i].replies.length > 0) {
res.data.list[i].replies = res.data.list[i].replies.splice(0, 5)
}
}
}
this.DetailList = res.data.list
this.all = res.data.totalPage
if (res.data.totalPage === 0) {
this.all = 1
}
if (this.cur > 1) {
this.isOne = false // 第二页 楼主不显示
} else {
this.isOne = true
}
})
},
mounted: function () {
const s = document.createElement('script')
s.type = 'text/javascript'
s.src = '//static.snail.com/js/stone/v2/statistics_ty_v2.source.js'
document.body.appendChild(s)
var editor = new E('#editorElem')
// editor.customConfig.onchange = (html) => {
// this.editorContent = html
// }
editor.customConfig.menus = [
// 'head', // 标题
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
// 'strikeThrough', // 删除线
// 'foreColor', // 文字颜色
// 'backColor', // 背景颜色
'link', // 插入链接
// 'list', // 列表
// 'justify', // 对齐方式
// 'quote', // 引用
'emoticon', // 表情
'image' // 插入图片
// 'table', // 表格
// 'video', // 插入视频
// 'code', // 插入代码
// 'undo', // 撤销
// 'redo' // 重复
]
// editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
editor.customConfig.pasteFilterStyle = true
editor.customConfig.uploadImgServer = '//moment.snail.com/api/v1/upload/image' // 上传图片到服务器
editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024
editor.customConfig.uploadImgMaxLength = 50
editor.customConfig.withCredentials = true
editor.customConfig.uploadImgParams = {
from: 'comment' // 属性值会自动进行 encode ，此处无需 encode
}
editor.customConfig.uploadFileName = 'file'
editor.customConfig.uploadImgHeaders = {
'Accept': 'text/x-json'
}
editor.customConfig.customAlert = function (info) {
// info 是需要提示的内容
// alert('info')
document.getElementById('postErrts').style.display = 'inline-block'
document.getElementById('postErrts').innerHTML = '图片过大，请上传小于2M的图片'
// console.log(info)
}
editor.customConfig.uploadImgHooks = {
fail: function (xhr, editor, result) {
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
document.getElementById('postErrts').style.display = 'inline-block'
document.getElementById('postErrts').innerHTML = '图片插入错误，请重新选择图片'
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
document.getElementById('postErrts').style.display = 'inline-block'
document.getElementById('postErrts').innerHTML = '图片上传错误，请重新选择图片'
},
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
if (result.code === 200) {
document.getElementById('postErrts').style.display = 'none'
var url = result.url
insertImg(url)
} else {
document.getElementById('postErrts').style.display = 'inline-block'
document.getElementById('postErrts').innerHTML = result.message
}
// console.log(result)
// result 必须是一个 JSON 格式字符串！！！否则报错
}
}
editor.customConfig.linkImgCallback = function (url) {
// console.log(url) // url 即插入图片的地址
}
editor.create()
// editor.txt.html('<p style="font-size:12px;color:#aaa;">请输入内容(～￣▽￣)～</p>')
var _this = this
document.getElementById('PostHtml').addEventListener('click', function () {
this.editorContent = editor.txt.html()
_this.getContent(editor.txt.html())
// console.log('1')
})
}
}
</script>
<style>
@import './sass/stylesheets/SocialDetail.css'
</style>
================================================
FILE: src/SocialIndex.vue
================================================
<template>
<div id="SocialIndex" class="SocialIndex">
<div class="SocialIndexHeader bgWhite" id="SocialIndexHeader">
<SocialIndexHeader :HdInfoData.sync="HdInfoData" :isSiH.sync="isSiH"></SocialIndexHeader>
</div>
<div class="SocialIndexMain clearfix">
<div class="MainList fl bgWhite">
<SocialIndexList></SocialIndexList>
</div>
<div class="MainMoudle fr" id="MainMoudle">
<SocialIndexHeader :HdInfoData.sync="HdInfoData" :isSiH.sync="isSiH" v-show="isShow"></SocialIndexHeader>
<SocialIndexAdmin :HdInfoData.sync="HdInfoData"></SocialIndexAdmin>
<SocialIndexHot></SocialIndexHot>
<SocialIndexRecommend></SocialIndexRecommend>
<span class="goTop cur" v-show="isGoTop" @click="goTop()"></span>
</div>
</div>
</div>
</template>
<script>
import SocialIndexHeader from './components/SocialIndexHeader.vue'
import SocialIndexAdmin from './components/SocialIndexAdmin.vue'
import SocialIndexHot from './components/SocialIndexHot.vue'
import SocialIndexList from './components/SocialIndexList.vue'
import SocialIndexRecommend from './components/SocialIndexRecommend.vue'
export default {
name: 'SocialIndex',
components: {
SocialIndexHeader: SocialIndexHeader,
SocialIndexAdmin: SocialIndexAdmin,
SocialIndexHot: SocialIndexHot,
SocialIndexList: SocialIndexList,
SocialIndexRecommend: SocialIndexRecommend
},
data () {
return {
HdInfoData: {},
isShow: false,
scrolled: false,
isSiH: true,
circleId: '',
isGoTop: false
}
},
ready () {
window.addEventListener('scroll', this.handleScroll)
},
methods: {
goTop: function () {
var gotoTop = function () {
var currentPosition = document.documentElement.scrollTop || document.body.scrollTop
currentPosition -= 80
if (currentPosition > 0) {
window.scrollTo(0, currentPosition)
} else {
window.scrollTo(0, 0)
clearInterval(timer)
timer = null
}
}
var timer = setInterval(gotoTop, 50)
},
handleScroll () {
this.scrolled = window.scrollY
if (this.scrolled > 800) {
document.getElementById('IndexListType').style.position = 'fixed'
} else {
document.getElementById('IndexListType').style.position = 'static'
}
if (this.scrolled > 1236) {
this.isShow = true
this.isGoTop = true
document.getElementById('SocialIndexRecommend').classList.add('fixed')
document.getElementById('MainMoudle').children[0].classList.add('hfixed')
} else if (this.scrolled < 800) {
document.getElementById('MainMoudle').children[0].classList.remove('hfixed')
document.getElementById('SocialIndexRecommend').classList.remove('fixed')
this.isShow = false
this.isGoTop = false
}
if (document.documentElement.clientHeight < 700) {
this.isGoTop = false
}
}
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},
created: function () {
this.circleId = this.$route.params.circleId
window.addEventListener('scroll', this.handleScroll)
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/circle/info',
method: 'jsonp',
params: {
'circle_id': this.circleId
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.data.code === 200) {
this.HdInfoData = res.data.info
console.log(res.data)
} else if (res.data.code === 404) {
var url = 'http://stone.snail.com/error/404.html?from=circle&type=1'
window.location.href = url
}
})
}
}
</script>
<style>
.MainMoudle{
width: 280px;
}
</style>
================================================
FILE: src/SocialPost.vue
================================================
<template>
<div id="SocialPost" class="SocialPost">
<h5 class="SP-Hd">发起讨论</h5>
<div class="SP-Main">
<div class="SPM-Title">
<div class="SPMT-Input fl">
<input type="text" placeholder="请输入标题(～￣▽￣)～ " class="bgWhite" v-model="items.text" ref="count"/>
<span>还可以输入<b>{{num}}</b>个字符</span>
</div>
<div class="SPMT-Classify fl bgWhite">
<div class="SPMTC-Input cur" @click="showSelect()" :data-tagId="tagId" :data-tagName="tagName">{{SelectInput}}</div>
<i :class="['rotatez',{'rotate': isSelect === false}]"></i>
<ul class="SPMTC-Select" v-show="isSelect">
<li v-for="(list, temp) in tags" :data-tagId="list.id" :title="list.name" @click="Choice(list.id, list.name)">{{list.name}}</li>
</ul>
</div>
</div>
<div class="SPM-Tags" v-if="isTopsList">
<div class="TagsDiv clearfix">
<span class="addTags fl cur" @click="addTopics">添加话题</span>
<span class="addTagsTs fl" v-if="topicNum == 5"></span>
<div class="tagsBox fl">
<span class="J-tags" v-for="(list, temp) in topicsList" :data-id="list.id" v-if="list.isShow">
{{list.name}}
<i class="removeTags cur fr" @click="removeJtags(list.temp, list.id)"></i>
</span>
</div>
<span class="tagsTs fr">您还可以添加{{topicNum}}个话题</span>
</div>
<div class="TagsList" v-if="isTops">
<span class="closeTags cur" @click="closeTagsList"></span>
<ul class="TagsListItem">
<li v-for="(list,temp) in topics" :data-topId="list.topic_id" :title="list.topic_name" @click="CurrentTop(temp, list.topic_id ,list.topic_name)" :class="['cur',{'active':list.isActive}]">{{list.topic_name}}</li>
</ul>
</div>
</div>
<div class="SPM-Editor">
<div id="editorElem" style="text-align:left"></div>
</div>
<div class="SPM-Operation">
<!-- <span class="wordnum fl">还可以输入999字符</span> -->
<span class="PostHtml cur fr animation" id="PostHtml" wn_tj_click_gameId wn_tj_click_href wn_tj_click_excel="posts" :wn_tj_click_id="circleId">发表</span>
<span class="errts fr" id="errts" v-show="errts">{{errtsText}}</span>
</div>
</div>
<div class="divmask" v-show="isDivmask" @click="closeDrown()"></div>
<div class="divmask" v-show="isTops" @click="clsowisTops()"></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'SocialPost',
components: {
},
watch: {
items: {
handler: function () {
var _this = this
var _sum = 30
_this.$refs.count.setAttribute('maxlength', _sum)
_this.number = _sum - _this.$refs.count.value.length
_this.num = _sum - _this.$refs.count.value.length
_this.title = _this.$refs.count.value
document.getElementById('errts').style.display = 'none'
},
deep: true
}
},
data () {
return {
tags: [],
topics: [],
circleId: '',
title: '',
content: '',
tag: '',
validate_code: '',
SelectInput: '话题分类',
isSelect: false,
tagId: '',
tagName: '',
items: {
text: ''
},
num: 30,
errtsText: '',
errts: false,
isDivmask: false,
isTops: false,
isTopsList: true,
classItem: [],
topicsId: [],
topicsList: [],
topicNum: 5
}
},
methods: {
removeJtags: function (temp, id) {
for (const i in this.topicsList) {
if (this.topicsList[i].temp === temp) {
this.topicsList.splice(i, 1)
}
}
for (const i in this.topicsId) {
if (this.topicsId[i] === '' + id + '') {
this.topicsId.splice(i, 1)
}
}
this.topics[temp].isActive = false
this.topicNum += 1
},
CurrentTop: function (temp, id, name) {
if (this.topics[temp].isActive === true) {
this.topics[temp].isActive = false
for (const i in this.topicsList) {
if (this.topicsList[i].temp === temp) {
this.topicsList.splice(i, 1)
}
}
for (const i in this.topicsId) {
if (this.topicsId[i] === '' + id + '') {
this.topicsId.splice(i, 1)
}
}
this.topicNum += 1
} else if (this.topics[temp].isActive === false) {
if (this.topicNum > 0) {
this.topics[temp].isActive = true
let obj = {
'id': id,
'name': name,
'isShow': true,
'temp': temp
}
this.topicsList.push(obj)
this.topicsId.push('' + id + '')
this.topicNum -= 1
}
}
},
closeDrown: function () {
this.isSelect = false
this.isDivmask = false
},
showSelect: function () { // 显示话题分类
if (this.isSelect === true) {
this.isSelect = false
} else {
this.isSelect = true
this.isDivmask = true
}
},
Choice: function (tagId, tagName) { // 选择分类
this.tagId = tagId
this.tagName = tagName
this.SelectInput = tagName
this.isSelect = false
this.isDivmask = false
},
addTopics: function () {
this.isTops = true
},
closeTagsList: function () {
this.isTops = false
// this.isTopsList = false
},
clsowisTops: function () {
this.isTops = false
},
getContent: function (text) { // 发送评论
var _this = this
document.getElementsByClassName('w-e-text')[0].blur()
if (this.title !== '' && text !== '' && this.tagId !== '') {
document.getElementById('errts').style.display = 'none'
// this.postHtml(this.circleId, this.title, this.editorContent, this.tagId)
_this.postHtml(this.circleId, this.title, text, this.tagId)
} else {
document.getElementById('errts').style.display = 'inline-block'
document.getElementById('errts').innerHTML = '请填写相关选项'
}
// if (text !== '') {
// _this.postHtml(this.circleId, this.title, text, this.tagId)
// }
},
postHtml: function (circleId, title, text, tag) {
var vm = this
var tid = this.topicsId
if (tid) {
tid = tid.join(',')
} else {
tid = ''
}
vm.$http.post('//moment.snail.com/api/v1/post/circle-post', {
circle_id: circleId,
topics: tid,
tag: tag,
content: text,
title: title
},
{emulateJSON: true}).then((res) => {
if (res.data.code === 200) {
this.errts = false
this.$router.push({name: 'circle', params: { circleId: this.circleId }})
} else {
document.getElementById('errts').style.display = 'inline-block'
document.getElementById('errts').innerHTML = res.data.message
}
}, (error) => { console.log(error) })
}
},
created: function () {
this.circleId = this.$route.params.circleId
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/circle/private-tags',
method: 'jsonp',
params: {
'circle_id': this.circleId
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
this.tags = res.data.tags
})
vm.$http({
url: '//moment.snail.com/api/v1/circle/get-topics',
method: 'jsonp',
params: {
'circle_id': this.circleId
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.body.code === 200) {
if (res.body.topics.length === 0 || res.body.topics.length === 1) {
this.isTopsList = false
if (res.body.topics.length === 1) {
this.topicsId.push('' + res.body.topics[0].topic_id + '')
}
} else {
for (let i in res.body.topics) {
res.body.topics[i]['isActive'] = false
}
this.topics = res.body.topics
}
}
})
},
mounted () {
var editor = new E('#editorElem')
// editor.customConfig.onchange = (html) => {
// this.editorContent = html
// }
editor.customConfig.menus = [
// 'head', // 标题
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
// 'strikeThrough', // 删除线
// 'foreColor', // 文字颜色
// 'backColor', // 背景颜色
'link', // 插入链接
// 'list', // 列表
// 'justify', // 对齐方式
// 'quote', // 引用
'emoticon', // 表情
'image' // 插入图片
// 'table', // 表格
// 'video', // 插入视频
// 'code', // 插入代码
// 'undo', // 撤销
// 'redo' // 重复
]
// editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
editor.customConfig.uploadImgServer = '//moment.snail.com/api/v1/upload/image' // 上传图片到服务器
editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024
editor.customConfig.uploadImgMaxLength = 50
editor.customConfig.withCredentials = true
editor.customConfig.uploadImgParams = {
from: 'post' // 属性值会自动进行 encode ，此处无需 encode
}
editor.customConfig.uploadFileName = 'file'
// editor.customConfig.uploadFileName = 'yourFileName'
editor.customConfig.uploadImgHeaders = {
'Accept': 'text/x-json'
}
editor.customConfig.customAlert = function (info) {
// info 是需要提示的内容
document.getElementById('errts').style.display = 'inline-block'
document.getElementById('errts').innerHTML = '图片过大，请上传小于2M的图片'
}
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function (xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
fail: function (xhr, editor, result) {
document.getElementById('errts').style.display = 'inline-block'
document.getElementById('errts').innerHTML = '图片插入错误，请重新选择图片'
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function (xhr, editor) {
// 图片上传出错时触发
document.getElementById('errts').style.display = 'inline-block'
document.getElementById('errts').innerHTML = '图片上传错误，请重新选择图片'
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
timeout: function (xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
if (result.code === 200) {
var url = result.url
insertImg(url)
document.getElementById('errts').style.display = 'none'
} else {
document.getElementById('errts').style.display = 'inline-block'
document.getElementById('errts').innerHTML = result.message
}
// result 必须是一个 JSON 格式字符串！！！否则报错
}
}
editor.customConfig.linkImgCallback = function (url) {
console.log(url, 'url') // url 即插入图片的地址
}
editor.create()
// editor.txt.html('<p style="font-size:12px;color:#aaa;">请输入内容(～￣▽￣)～</p>')
var _this = this
document.getElementById('PostHtml').addEventListener('click', function () {
// this.editorContent = editor.txt.html()
_this.getContent(editor.txt.html())
})
}
}
</script>
<style>
@import './sass/stylesheets/SocialPost.css'
</style>
================================================
FILE: src/components/DetailLi.vue
================================================
<template>
<li class="clearfix bgWhite ListContUlLi">
<div class="Jitems">
<div class="JitemsLeft fl">
<div class="J-UserInfo">
<div class="J-UserInfo-Pic"><img src="./images/hd.jpg" /></div>
<span class="J-UserInfo-Name">管理远阿德管理远阿德</span>
<span class="J-UserInfo-adminCall">管理员</span>
</div>
</div>
<div class="JitemsRight fr">
<div class="J-TextCont">
<img src="./images/1.jpg"/>
那么《绝地求生》游戏有多火呢？
</div>
<div class="J-ClickUp J-On">
<p></p>
<p>500</p>
</div>
<div class="J-Modle clearfix">
<div class="J-Modle-Hd">
<div class="Hd-Floor fl"><span>2楼</span>10-12 20：23</div>
<div class="Hd-Moudle fr">
<ol>
<li><span class="PostManagement"><img src="./images/icon12.png"/>帖子管理<i class="rotate"></i></span></li>
<li><span class="Hd-Moudle-Del">删除</span></li>
<li><span class="Hd-Moudle-Report">举报</span></li>
<li><span class="Hd-Moudle-Reply"><img src="./images/icon6.png"/>收起回复<b>（6）</b></span></li>
<li><span class="Hd-Moudle-Praise"><img src="./images/icon11.png"/>赞</span></li>
</ol>
</div>
</div>
<div class="J-Moudle-List">
<div class="J-Moudle-List-Cont clearfix">
<ul>
<li class="">
<div class="Jmoude-items clearfix">
<div class="Jmoude-items-Pic fl"><img src="./images/hd.jpg"/></div>
<div class="Jmoude-items-Cont fr">
<div class="Jmoudle-items-h5">
<a href="javascript:;">逆风学长：</a><span>据相关媒体报道，沈阳通用航空产业基地于2010年开始建设，目前规划面积68平方公里，入驻通航企业近20家，已完成跑道、航站楼、停机坪、机库、路网、管网等设施建设，开放空域在3000米以下、3000平方公里以上，正在打造通用飞机(无人机)研发生产、检测试飞及航材生产基地，建设无人机产业园、航空新材料产业园。</span>
</div>
<div class="Jmoudle-items-info">
<span class="fl">25分钟前</span>
<span class="fr cur">回复</span>
</div>
</div>
</div>
</li>
<li class="">
<div class="Jmoude-items clearfix">
<div class="Jmoude-items-Pic fl"><img src="./images/hd.jpg"/></div>
<div class="Jmoude-items-Cont fr">
<div class="Jmoudle-items-h5">
<a href="javascript:;">逆风学长：</a>回复<span><a href="javascript:;">逆风学长：</a>据相关媒体报道，沈阳通用航空产业基地于2010年开始建设，目前规划面积68平方公里，入驻通航企业近20家，已完成跑道、航站楼、停机坪、机库、路网、管网等设施建设，开放空域在3000米以下、3000平方公里以上，正在打造通用飞机(无人机)研发生产、检测试飞及航材生产基地，建设无人机产业园、航空新材料产业园。</span>
</div>
<div class="Jmoudle-items-info">
<span class="fl">25分钟前</span>
<span class="fr cur">回复</span>
</div>
</div>
</div>
</li>
</ul>
<div class="J-Moudle-List-Cont-Jet">
<span class="J-Moudle-List-More fl cur">查看更多</span>
<div class="J-Moudle-Page fl"></div>
<div class="J-Moudle-Mebtn fr cur">我也说一句</div>
</div>
</div>
<div class="J-Moudle-List-Input">
<div class="J-Moudle-List-Input-Box">
<input type="text" placeholder="回复 逆风学长："/>
</div>
<div class="J-Moudle-List-Input-Set">
<div class="J-M-l-I-S-Icon cur fl">
<img src="./images/icon13.png"/>
<div class="Icon-List none"></div>
</div>
<span class="J-M-L-Btn cur fr">发表</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</div>
</template>
<script>
export default {
name: 'pager',
props: {
// 用于记录总页码，可由父组件传过来
pageNo: {
type: Number,
default: 1
},
// 用于记录当前页数，这个与父组件进行数据交互来完成每一页的数据更新，所以我们只要改变current的值来控制整个页面的数据即可
current: {
type: Number,
default: 1
}
},
data: function () {
return {
// 用于判断省略号是否显示
backClipped: true,
preClipped: false
}
},
methods: {
prePage () {
// 上一页
// if (current !== 1) {
this.current--
// }
},
nextPage () {
// 下一页
// if (current < this.pageNo) {
this.current++
// }
},
goPage (index) {
// 跳转到相应页面
if (index !== this.current) {
this.current = index
}
}
},
computed: {
// 使用计算属性来得到每次应该显示的页码
pages: function () {
let ret = []
if (this.current > 3) {
// 当前页码大于三时，显示当前页码的前2个
ret.push(this.current - 2)
ret.push(this.current - 1)
if (this.current > 4) {
// 当前页与第一页差距4以上时显示省略号
this.preClipped = true
}
} else {
this.preClipped = false
for (let i = 2; i < this.current; i++) {
ret.push(i)
}
}
if (this.current !== this.pageNo && this.current !== 1) {
ret.push(this.current)
}
if (this.current < (this.pageNo - 2)) {
// 显示当前页码的后2个
ret.push(this.current + 1)
ret.push(this.current + 2)
if (this.current <= (this.pageNo - 10)) {
// 当前页与最后一页差距3以上时显示省略号
this.backClipped = true
}
} else {
this.backClipped = false
for (let i = (this.current + 1); i < this.pageNo; i++) {
ret.push(i)
}
}
// 返回整个页码组
return ret
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pager {
text-align: center;
font-size: 0;
margin-top:10px;
}
.pager a,.pager button{
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
font-size: 12px;
color: rgb(167, 167, 167);
background: #fff;
border: 1px solid rgb(238, 240, 241);
border-right:none;
}
.pager a:last-child{
border-right: 1px solid rgb(238, 240, 241);
}
.btnPager:hover {
background-color: #f2f2f2;
}
.pager .active,
.pager .pageIndex:hover{
color: #fff;
border-color:rgb(0, 170, 255);
background: rgb(0, 170, 255);
}
.pager button{
position: relative;
top:1px;
width: 38px;
height: 38px;
}
.pager .default{
background:#f2f2f2;
cursor: not-allowed;
}
</style>
================================================
FILE: src/components/Editor.vue
================================================
<template>
<div>
<div id="editorElem" style="text-align:left"></div>
<span class="PostHtml cur" v-on:click="getContent">发表</span>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'editor',
props: ['postId', 'page', 'flag'],
data () {
return {
editorContent: ''
}
},
methods: {
getContent: function () {
if (this.editorContent !== '') {
this.postHtml(this.postId, this.editorContent)
}
},
postHtml: function (postId, editorContent) {
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/comment/comment',
method: 'jsonp',
params: {
'post_id': postId,
'content': editorContent
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
this.LoadHtml(this.page, this.flag)
})
}
},
mounted () {
var editor = new E('#editorElem')
editor.customConfig.onchange = (html) => {
this.editorContent = html
}
editor.customConfig.menus = [
// 'head', // 标题
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
// 'strikeThrough', // 删除线
// 'foreColor', // 文字颜色
// 'backColor', // 背景颜色
// 'link', // 插入链接
// 'list', // 列表
// 'justify', // 对齐方式
// 'quote', // 引用
'emoticon', // 表情
'image' // 插入图片
// 'table', // 表格
// 'video', // 插入视频
// 'code', // 插入代码
// 'undo', // 撤销
// 'redo' // 重复
]
editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
editor.customConfig.uploadImgServer = '/upload' // 上传图片到服务器
editor.create()
}
}
</script>
<style scoped>
#editorElem{}
</style>
================================================
FILE: src/components/EnlargePicture.vue
================================================
<template>
<div class="Jlist-thumb clearfix" v-if="imagesList != ''" v-show="Flag">
<div class="thumbHd"><a href="javascript:;" class="j_retract" @click="hidePic($event)"><i class="icon_retract"></i>收起</a> </div>
<div class="thumbWarp">
<div :class="['thumbWarpList',{none: tumbCurrent != index }]" v-for="(img, index) in imagesList" >
<div class="thumbPrev" v-if="index != 0" :data-cur="index-1" @click="thumbPrev(index)"></div>
<img :src="img" alt="刷新查看" @click="hidePic2($event)"/>
<div class="thumbNext" v-if="imagesList.length-1 != index" :data-cur="index+1" @click="thumbNext(index)"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Jlistthumb',
props: ['imagesList', 'isCurrent', 'isFlag'],
watch: {
isCurrent: function () {
// alert('ss')
this.tumbCurrent = this.isCurrent
},
isFlag: function () {
this.Flag = this.isFlag
}
},
data () {
return {
list: this.imagesList,
tumbCurrent: this.isCurrent,
Flag: this.isFlag
}
},
methods: {
hidePic: function (event) {
// event.target.parentNode.parentNode.style.display = 'none'
this.Flag = false
},
hidePic2: function (event) {
// event.target.parentNode.parentNode.parentNode.style.display = 'none'
this.Flag = false
},
thumbNext: function (index) { // 缩略图
this.tumbCurrent = index + 1
},
thumbPrev: function (index) {
index = index - 1
this.tumbCurrent = index
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
================================================
FILE: src/components/IndexList.vue
================================================
<template>
<div class="IndexList" id="IndexList">
<div class="IndexListType clearfix" id="IndexListType">
<div class="TypeTag fl">
<ul>
<li>
热门动态
</li>
</ul>
</div>
</div>
<div class="IndexListCont">
<ul>
<li v-for="(list, i) in list" :data-listId="list.circle_id">
<div class="Jitems">
<div class="Jitems-Name">
<img :src="list.circle_logo" class="qzicon fl"/>
<router-link class ="Qzname fl" :to="{ name: 'circle', params: {'circleId':list.circle_id}}" :title="list.circle_name" :circleId="list.circle_id">{{list.circle_name}}</router-link>
<a href="javascript:;" class="Indexlist_join" @click="JoinQz(list.circle_id, i)" v-show="!list.circle_is_joined" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="join_community" :wn_tj_click_id="list.circle_id"><img src="../images/icon3.png"/>加入</a>
<a href="javascript:;" class="Indexlist_ujoin" @click="QuitQz(list.circle_id, i)" v-show="list.circle_is_joined"><span>已加入</span><span>退出</span></a>
</div>
<div class="Jitems-Title">
<router-link :to="{ name: 'post', params: {'circleId':list.circle_id,'postId': list.id,'onPage':1}}" :title="list.title" :listId="list.id" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="news_headlines" :wn_tj_click_id="list.id">{{list.title}}</router-link>
</div>
<div class="Jitems-Detail">
<h5 class="Jitems-Detail-text" v-html="list.text"></h5>
<div class="Jitems-Detail-img clearfix">
<div class="JDICont">
<div class="imgList" v-for="(img, index) in list.images" @click="ShowBigPic($event,index,i)">
<div class="imgfd"></div>
<img :src="img + '?x-oss-process=image/resize,h_110'" alt="点击加载图片"/>
</div>
</div>
<div class="Jlist-thumb clearfix" v-if="list.images != ''" v-show="list.flag">
<div class="thumbHd"><a href="javascript:;" class="j_retract" @click="hidePic($event,i)"><i class="icon_retract"></i>收起</a> </div>
<div class="thumbWarp">
<div :class="['thumbWarpList',{none: list.showindex != index }]" v-for="(img, index) in list.images" >
<div class="thumbPrev" v-if="index != 0" :data-cur="index-1" @click="thumbPrev(index,i)"></div>
<div class="thumbsx" @click="hidePic2($event,i)"></div>
<img :src="img" alt="刷新查看" />
<div class="thumbNext" v-if="list.images.length-1 != index" :data-cur="index+1" @click="thumbNext(index,i)"></div>
</div>
</div>
</div>
</div>
</div>
<div class="Jitems-Info">
<div class="JuserInfo fl">
<a href="javascript:;" class="JuserInfo-people" :title="list.user_nickname">
{{list.user_nickname}}
</a>
<span class="JuserInfo-time" :title="list.created_at">{{list.created_at}}</span>
</div>
<router-link class="JdataInfo fr" :to="{ name: 'post', params: {'circleId':list.circle_id,'postId': list.id}}">
<span class="Jview"><img src="../images/icon4.png"/>{{list.view_count}}</span>
<span class="Jreply"><img src="../images/icon5.png"/>{{list.comment_count}}</span>
</router-link>
</div>
</div>
</li>
</ul>
<div class="drownbox">
<span :class="{goDrown : drownReflush === true}" v-show="drownReflushText" wn_tj_click_gameId wn_tj_click_href wn_tj_click_excel="more" wn_tj_click_id @click="more">{{drownReflush === true ? '加载更多' : '没有更多了'}}</span>
<div :class="['spinner8',{none:load === false}]">
<div class="spinner-container container1">
<div class="circle1"> </div>
<div class="circle2"> </div>
<div class="circle3"> </div>
<div class="circle4"> </div>
</div>
<div class="spinner-container container2">
<div class="circle1"> </div>
<div class="circle2"> </div>
<div class="circle3"> </div>
<div class="circle4"> </div>
</div>
<div class="spinner-container container3">
<div class="circle1"> </div>
<div class="circle2"> </div>
<div class="circle3"> </div>
<div class="circle4"> </div>
</div>
</div>
</div>
</div>
<div class="selectMask" v-show="isSelectMask" @click="closeSelect()"></div>
</div>
</template>
<script>
import pagination from './pagination.vue'
export default {
name: 'IndexList',
components: {
pagination: pagination
},
watch: {
currentPage: 'requestData',
list: {
handler: function (val, oldval) {
// console.log(val)
}
}
},
ready () {
this.requestData()
window.addEventListener('scroll', this.handleScroll)
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},
data () {
return {
list: [],
circleId: '',
cur: 1,
all: 1,
pageSize: 10,
showFlag: -1,
tumbCurrent: 0,
show: false,
scrolled: false,
isJump: true,
isSelectMask: false,
drownReflushText: true,
drownReflush: true,
load: false
}
},
methods: {
ShowLoginPop: function () {
document.getElementById('login_pop').style.display = 'block'
document.getElementById('stone_mask').style.display = 'block'
},
// Join quanzi
JoinQz: function (qzId, temp) {
if (document.getElementById('pdLogin').value === 'true') {
let JoinUrl = '//moment.snail.com/api/v1/circle/join'
this.JoinState(qzId, JoinUrl, 'join', temp)
} else {
// alert('清闲登陆1')
this.ShowLoginPop()
}
},
QuitQz: function (qzId, temp) {
if (document.getElementById('pdLogin').value === 'true') {
let QuitUrl = '//moment.snail.com/api/v1/circle/leave'
this.JoinState(qzId, QuitUrl, 'quit', temp)
} else {
this.ShowLoginPop()
}
},
JoinState: function (qzId, url, flag, temp) {
const vm = this
vm.$http({
url: url,
method: 'jsonp',
params: {'circle_id': qzId},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (flag === 'join') {
this.list[temp].circle_is_joined = true
} else if (flag === 'quit') {
this.list[temp].circle_is_joined = false
}
})
},
more: function () {
if (this.drownReflush === true) {
if (this.cur < this.all) {
this.ShowHtml(++this.cur)
} else {
this.load = false
this.drownReflush = false
this.drownReflushText = true
}
} else {
this.load = false
this.drownReflush = false
this.drownReflushText = true
}
},
handleScroll: function (scroll) {
this.scrolled = window.scrollY
if (this.cur < this.all) {
if (this.scrolled >= document.documentElement.scrollHeight - 959) { // 下拉刷新
this.load = true
this.drownReflushText = false
let _this = this
setTimeout(function () {
_this.ShowHtml(++_this.cur)
}, 1000)
}
} else { // 没有 择显示没有了
this.load = false
this.drownReflush = false
this.drownReflushText = true
}
},
hidePic: function (event, temp) {
this.list[temp]['flag'] = false
},
hidePic2: function (event, temp) {
this.list[temp]['flag'] = false
},
thumbNext: function (index, temp) { // 缩略图
this.list[temp]['showindex'] = index + 1
},
thumbPrev: function (index, temp) {
this.list[temp]['showindex'] = index - 1
},
ShowBigPic: function (event, index, temp) {
this.list[temp].flag = true
this.list[temp]['showindex'] = index
},
goTop: function () {
var gotoTop = function () {
var currentPosition = document.documentElement.scrollTop || document.body.scrollTop
currentPosition -= 80
if (currentPosition > 0) {
window.scrollTo(0, currentPosition)
} else {
window.scrollTo(0, 0)
clearInterval(timer)
timer = null
}
}
var timer = setInterval(gotoTop, 50)
},
monitor: function (data) { // 分页监听
this.ShowHtml(this.order, data)
this.goTop()
},
ShowHtml: function (page) {
const vm = this
const Jdata = {
'page': page
}
vm.$http({
url: '//moment.snail.com/api/v1/post/list-of-hot-circle-post',
method: 'jsonp',
params: Jdata,
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
for (var i in res.data.list) {
res.data.list[i]['flag'] = false
res.data.list[i]['showindex'] = 0
this.list.push(res.data.list[i])
}
this.all = res.data.totalPage
if (res.data.totalPage === 0 || res.data.totalPage < 2) {
this.all = 1
this.load = false
this.drownReflushText = true
this.drownReflush = false
} else {
this.load = false
this.drownReflush = true
this.drownReflushText = true
}
})
}
},
created: function () {
this.circleId = this.$route.params.circleId
window.addEventListener('scroll', this.handleScroll)
const vm = this
const Jdata = {
'page': 1
}
vm.$http({
url: '//moment.snail.com/api/v1/post/list-of-hot-circle-post',
method: 'jsonp',
params: Jdata,
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
for (var i in res.data.list) {
res.data.list[i]['flag'] = false
res.data.list[i]['showindex'] = 0
}
this.list = res.data.list
this.all = res.data.totalPage
if (res.data.totalPage === 0 || res.data.totalPage < 2) {
this.all = 1
this.drownReflush = false
this.drownReflushText = false
}
})
}
}
</script>
<style scoped>
@import '../sass/stylesheets/IndexList.css'
</style>
================================================
FILE: src/components/LoginPop.vue
================================================
<template>
<div class="LoginPop" id="LoginPop" v-show="ispop">
<div class="LoginPop_outer">
<i class="LoginPop_cancle" @click="closepop"></i>
<div class="LoginPop_title"><img src="http://www.iplaystone.com/static/common/images/loginPic.png"/></div>
<div class="LoginPop_input"><input id="LoginPop_userName" placeholder="电子邮箱/手机号" />
<i class="LoginPop_icon LoginPop_user"></i>
<div class="LoginPop_error"></div>
</div>
<div class="LoginPop_input"><input type="password" id="LoginPop_pwd" placeholder="密码" />
<i class="LoginPop_icon LoginPop_pwd"></i>
<div class="LoginPop_error"></div>
</div>
<div class="LoginPop_btn"><button id="LoginPop_submit" @click="login">登录</button></div>
<div class="LoginPop_box"><a href="http://www.iplaystone.com/static/web/resetPwd.html" class="LoginPop_forget">忘记密码?</a><span></span><a href="http://www.iplaystone.com/static/web/register.html" target="_blank" class="LoginPop_register">立即注册</a></div>
</div>
</div>
</template>
<script>
export default {
name: 'LoginPop',
data: function () {
return {
ispop: false
}
},
methods: {
login: function () {
this.showMoreMyCircle = false
},
closepop: function () {
this.ispop = false
}
},
created: function () {
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/user/info',
method: 'jsonp',
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.data.code === 200) {
this.info = res.data.info
this.isLogin = true
}
})
vm.$http({
url: '//moment.snail.com/api/v1/user/my-circles',
method: 'jsonp',
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.data.code === 200) {
this.myCircleListDetail = res.data.list
}
})
}
}
</script>
<style scoped>
@import '../sass/stylesheets/LoginPop.css'
</style>
================================================
FILE: src/components/PeoInfo.vue
================================================
<template>
<div class="PeoInfo bgWhite" id="PeoInfo" style="">
<div class="onLogin">
<div class="PeoInfo-Hd">
<img :src="isLogin === true ? info.photo : 'http://www.iplaystone.com/static/common/images/loginPic.png'"/>
</div>
<a href="javascript:;" class="PeoInfo-Name" :title="info.nickname">{{isLogin === true ? info.nickname : '游客'}}</a>
<h6 :title="info.introduce">{{info.introduce}} </h6>
<div class="span" v-if="false">
<a class="home cur" href="javascript:;">
<span></span>
<span>主页</span>
</a>
<a class="collection cur" href="javascript:;">
<span></span>
<span>收藏</span>
</a>
<a class="qz cur" href="javascript:;">
<span></span>
<span>圈子</span>
</a>
</div>
<div class="myCircle" v-if="isLogin === true">
<h4>我的圈子</h4>
<div :class="['myCircleList',{myCircleHeight:showMoreMyCircle === true}]" id="myCircleList">
<router-link class="myCircleListItem" v-for="(list, i) in myCircleListDetail" :key="i" :to="{ name: 'circle', params: {'circleId':list.id}}" :title="list.name" :circleId="list.id">
<img :src="list.logo"/>
<span :title="list.name">{{list.name}}</span>
</router-link>
</div>
<div class="showMoreMyCircle" @click="showMoreMyCircleBtn" v-if="showMoreMyCircle" id="showMoreMyCircle">查看全部<i></i></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'PeoInfo',
props: ['showMoreMyCircle'],
data: function () {
return {
info: {},
isLogin: false,
myCircleListDetail: []
// showMoreMyCircle: true
}
},
methods: {
showMoreMyCircleBtn: function () {
this.showMoreMyCircle = false
}
},
created: function () {
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/user/info',
method: 'jsonp',
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.data.code === 200) {
this.info = res.data.info
this.isLogin = true
}
})
vm.$http({
url: '//moment.snail.com/api/v1/user/my-circles',
method: 'jsonp',
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.data.code === 200) {
this.myCircleListDetail = res.data.list
if (res.data.list.length < 7) {
document.getElementById('showMoreMyCircle').style.display = 'none'
document.getElementById('myCircleList').style.height = 'auto'
}
}
})
}
}
</script>
<style scoped>
@import '../sass/stylesheets/SocialPeoInfo.css'
</style>
================================================
FILE: src/components/SocialIndexAdmin.vue
================================================
<template>
<div id="SocialIndexAdmin" class="SocialIndexAdmin bgWhite">
<div class="MoudleHd">
管理团队
<a href="javascript:;" class="ApplyAdmin fr" @click="judgeInfo" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="moderator_recruitment" :wn_tj_click_id="circleId" v-if="!HdInfoData.is_admin">申请管理员</a>
</div>
<div class="SocialIndexAdmin-Cont clearfix">
<ul>
<li v-for="list in HdInfoData.adminUserInfo">
<a href="javascript:;" class="default" :data-adminId="list.id" :data-adminUuid="list.uuid" :title="list.nickname">
<img :src="list.photo" class="adminPic"/>
<span class="adminName" :title="list.nickname">{{list.nickname}}</span>
</a>
</li>
</ul>
</div>
<div class="rulePop" v-if="ismask">
<div class="rulePop-Hd">
申请管理员<img src="../images/close.png" class="fr cur" alt="关闭" @click="closePop()"/>
</div>
<div class="rulePop-Cont">
<div class="r-setp r-setpA" v-if="setpA">
<h3>管理员守则</h3>
<div class="overText">
<h4>圈子管理员职责：</h4>
<h5>1. 建立各个圈子的置顶规则，如加精规则、违规处罚规则等。</h5>
<h5>2. 积极活跃圈子讨论和交流气氛，组织大家参与或开展各种圈子讨论话题，为玩家建立和维护一个良好的交流环境，吸引更多的用户加入进来，并保持圈子的活跃。</h5>
<h5>3. 积极挖掘优秀内容，尊重作者劳心劳力之贡献，并将其中优秀帖子加精华给予鼓励。</h5>
<h5>4. 保证圈子内容质量，及时对圈子内的不良信息进行处理，如广告、黄赌毒、政治敏感、侵权、不实信息等。</h5>
<h5>5. 收集论坛的缺点和网友的意见和建议，每月月底反馈。</h5>
<h5>6. 每天坚持登录自己所管辖的圈子，保证每周有5条主题更新（内容可长可短，形式可多样，可以像微博一样一个讨论的话题，也可以是一篇攻略，或是转载的图文等），每周保持Stone在线10小时以上。</h5>
<h5>7. 申请圈子管理员的玩家请保证提交材料真实可信。</h5>
</div>
</div>
<div class="r-setp r-setpB" v-if="setpB">
<h3>申请资料</h3>
<div class="r-setpList">
<p class="r-setpList-Name">申请人账号：</p>
<p class="r-setpList-Cont">{{applyInfo.username}}</p>
</div>
<div class="r-setpList">
<p class="r-setpList-Name">申请人昵称：</p>
<p class="r-setpList-Cont">{{applyInfo.nickname}}</p>
</div>
<div class="r-setpList">
<p class="r-setpList-Name">圈子名称：</p>
<p class="r-setpList-Cont yellowColor">{{applyInfo.circle_name}}</p>
</div>
<div class="r-setpList">
<p class="r-setpList-Name">联系方式：</p>
<p class="r-setpList-Cont"><input type="text" placeholder="手机/QQ号/微信号" id="applyContact" @focus="removeTs"/></p>
</div>
<div class="r-setpList clearfix">
<p class="r-setpList-Name">申请理由：</p>
<p class="r-setpList-Cont"><textarea id="applyReason" @focus="removeTs" placeholder="例如： 方舟玩过1000小时，有贴吧管理员经验等等。"></textarea></p>
</div>
<span class="ruleerrts" v-if="error">{{errorText}}</span>
</div>
<div class="r-setp r-setpC mt60" v-if="setpC">
<img src="../images/rss.png"/>
<p>资料已成功提交<br/>工作人员会尽快联系您</p>
</div>
<div class="r-setp r-setpD mt60" v-if="setpD">
<img src="../images/rm.png"/>
<p v-html="overText"></p>
</div>
<div class="r-setp r-setpD mt60" v-if="setpE">
<img src="../images/rm.png"/>
<p>您尚未加入圈子<br/>请先加入圈子~</p>
</div>
</div>
<div class="rulePop-Bt">
<span class="ruleSure cur" @click="btnClick()" v-if="sureBtn">{{ruleText}}</span>
<span class="ruleCannle cur" @click="closePop()" v-if="chanBtn">再想想</span>
</div>
</div>
<div class="divmask" v-if="ismask"></div>
</div>
</template>
<script>
export default {
name: 'SocialIndexAdmin',
props: {
HdInfoData: {
type: Object
}
},
data () {
return {
ismask: false,
circleId: '',
ruleText: '同意',
geturl: 'http://moment.snail.com/api/v1/circle/admin-apply-info',
posturl: 'http://moment.snail.com/api/v1/circle/admin-apply',
setpA: false,
setpB: false,
setpC: false,
setpD: false,
setpE: false,
sureBtn: true,
chanBtn: true,
status: 'setpA',
applyInfo: [],
error: false,
errorText: '请完整填写联系方式和申请理由！',
overText: '您的申请正在审核<br/>请耐心等待~'
}
},
methods: {
ShowLoginPop: function () {
document.getElementById('login_pop').style.display = 'block'
document.getElementById('stone_mask').style.display = 'block'
},
Apply: function () {
var _this = this
_this.ismask = true
},
closePop: function () {
var _this = this
_this.ismask = false
},
removeTs: function () {
const _this = this
_this.error = false
},
btnClick: function () {
const _this = this
if (_this.status === 'setpA') {
_this.setpB = _this.sureBtn = true
_this.ruleText = '提交'
_this.status = 'setpB'
_this.setpA = _this.setpC = _this.setpD = _this.chanBtn = _this.setpE = false
} else if (_this.status === 'setpB') {
if (document.getElementById('applyContact').value !== '' && document.getElementById('applyReason').value !== '') {
_this.postInfo(document.getElementById('applyContact').value, document.getElementById('applyReason').value)
} else {
_this.error = true
_this.errorText = '请完整填写联系方式和申请理由！'
}
} else if (_this.status === 'setpC') {
_this.ismask = false
} else if (_this.status === 'setpD' || _this.status === 'setpE') {
_this.ismask = false
}
},
judgeInfo: function () {
if (document.getElementById('pdLogin').value === 'true') {
this.judgeInfoClick()
} else {
this.ShowLoginPop()
}
},
judgeInfoClick: function () {
const _this = this
_this.$http({
url: _this.geturl,
method: 'jsonp',
params: {'circle_id': _this.circleId},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
console.log(res.body.code)
if (res.body.code === 40004) { // 已申请
_this.ismask = true
_this.ruleText = '关闭'
_this.status = 'setpD'
_this.setpD = _this.sureBtn = true
_this.setpB = _this.setpC = _this.setpA = _this.chanBtn = _this.setpE = false
} else if (res.body.code === 40006) { // 已申请在申请其他圈子
_this.ismask = true
_this.ruleText = '关闭'
_this.status = 'setpD'
_this.overText = '已有其他申请正在审核<br/>请耐心等待~'
_this.setpD = _this.sureBtn = true
_this.setpB = _this.setpC = _this.setpA = _this.chanBtn = _this.setpE = false
} else if (res.body.code === 40003) { // 未加入
_this.ismask = true
_this.ruleText = '关闭'
_this.status = 'setpE'
_this.setpE = _this.sureBtn = true
_this.setpB = _this.setpC = _this.setpA = _this.chanBtn = _this.setpD = false
} else if (res.body.code === 40005) { // 已经是管理员
window.location.href = window.location.href
} else if (res.body.code === 200) {
_this.applyInfo = res.body.info
_this.ismask = true
_this.status = 'setpA'
_this.ruleText = '同意'
_this.setpA = _this.sureBtn = _this.chanBtn = true
_this.setpB = _this.setpC = _this.setpD = _this.setpE = false
}
})
},
postInfo: function (applyContact, applyReason) {
const _this = this
_this.$http({
url: _this.posturl,
method: 'jsonp',
params: {
'circle_id': _this.circleId,
'contact': applyContact,
'reason': applyReason
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.body.code === 200) {
console.log(res)
_this.status = 'setpC'
_this.ruleText = '关闭'
_this.setpC = _this.sureBtn = true
_this.setpB = _this.setpA = _this.setpD = _this.chanBtn = false
} else {
_this.error = true
_this.errorText = res.body.message
}
})
}
},
created: function () {
this.circleId = this.$route.params.circleId
}
}
</script>
<style scoped>
@import '../sass/stylesheets/SocialIndexAdmin.css'
</style>
================================================
FILE: src/components/SocialIndexDetail.vue
================================================
<template>
<div class="">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
</style>
================================================
FILE: src/components/SocialIndexHeader.vue
================================================
<template>
<div class="HdInfo clearfix">
<div class="SiH-Info fl" :data-QzId="HdInfoData.id" :data-gameId="HdInfoData.game_id">
<img :src="HdInfoData.icon" class="SiH-Info-Pic fl"/>
<div class="SiH-Info-name fl">
<div class="Hname">
<!-- <h5 class="fl" :title="HdInfoData.name" :to="{ name: 'circle', params: {'circleId':HdInfoData.id}}">{{HdInfoData.name}}</h5> -->
<router-link class="fl h5" :to="{ name: 'circle', params: {'circleId':HdInfoData.id}}" :title="HdInfoData.name">{{HdInfoData.name}}</router-link>
<a href="javascript:;" class="HnameBtnOn fl" v-if="this.HdInfoData.is_joined" @click="QuitQz(HdInfoData.id)" data-text="退出"><span>已加入</span><span>退出</span></a>
<a href="javascript:;" class="HnameBtnUn fl" v-if="!this.HdInfoData.is_joined" @click="JoinQz(HdInfoData.id)" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="join_community" :wn_tj_click_id="HdInfoData.id"><img src="../images/icon3.png"/>加入</a>
</div>
<h4 class="Htitle" :title="HdInfoData.description">{{HdInfoData.description}}</h4>
</div>
</div>
<div class="SiH-Href fr" v-show="isSiH">
<a :href="HdInfoData.shop_url" class="goShop fr" :wn_tj_click_href="HdInfoData.shop_url" wn_tj_click_gameId wn_tj_click_excel="mall_entrance" wn_tj_click_id>商店</a>
<!-- <a :href="HdInfoData.shop_url" class="goShop fr">商店</a> -->
<div class="SiH-Launch fr animation" @click="goDiscussion(HdInfoData.id)">
<!-- <img src="../images/icon.png"/>发起讨论 -->
</div>
</div>
</div>
</template>
<script>
export default {
name: 'SocialIndexHeader',
props: ['HdInfoData', 'isSiH'],
data () {
return {
isJoined: this.HdInfoData.is_joined,
joinText: '已加入'
}
},
watch: {
HdInfoData: function (value) {}
},
methods: {
ShowLoginPop: function () {
document.getElementById('login_pop').style.display = 'block'
document.getElementById('stone_mask').style.display = 'block'
},
dataDetails: function () {
this.joinText = '退出'
},
// 发起讨论
goDiscussion: function (qzId) {
if (document.getElementById('pdLogin').value === 'true') {
this.$router.push({name: 'SocialPost', params: {circleId: qzId}})
} else {
this.ShowLoginPop()
}
},
// Join quanzi
JoinQz: function (qzId, temp) {
if (document.getElementById('pdLogin').value === 'true') {
let JoinUrl = '//moment.snail.com/api/v1/circle/join'
this.JoinState(qzId, JoinUrl, 'join', temp)
} else {
this.ShowLoginPop()
}
},
QuitQz: function (qzId, temp) {
if (document.getElementById('pdLogin').value === 'true') {
let QuitUrl = '//moment.snail.com/api/v1/circle/leave'
this.JoinState(qzId, QuitUrl, 'quit', temp)
} else {
this.ShowLoginPop()
}
},
JoinState: function (qzId, url, flag) {
const vm = this
vm.$http({
url: url,
method: 'jsonp',
params: {'circle_id': qzId},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (flag === 'join') {
this.HdInfoData.is_joined = true
} else if (flag === 'quit') {
this.HdInfoData.is_joined = false
}
})
}
},
created: function () {}
}
</script>
<style scoped>
@import '../sass/stylesheets/SocialIndexHeader.css'
</style>
================================================
FILE: src/components/SocialIndexHot.vue
================================================
<template>
<div class="SocialIndexHot bgWhite" id="SocialIndexHot">
<div class="MoudleHd">
热门讨论
</div>
<div class="HotList clearfix">
<ul>
<li v-for="(list,temp) in list">
<router-link :to="{ name: 'post', params: {'circleId':list.circle_id,'postId': list.id,'onPage':1}}" :title="list.title" :listId="list.id" wn_tj_click_gameId wn_tj_click_href wn_tj_click_excel="hot_posts" :wn_tj_click_id="list.id">
<i class="fl">{{temp+1}}</i>
<span class="fl" :title="list.title">{{list.title}}</span>
<b class="fr">{{list.view_count}}</b>
</router-link>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'SocialIndexHot',
data () {
return {
list: [ ]
}
},
created: function () {
const vm = this
vm.$http({
url: '//moment.snail.com/api/v1/post/hot-circle-post-top-ten',
method: 'jsonp',
params: {'page': 1},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
this.list = res.data.list
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import '../sass/stylesheets/SocialIndexHot.css'
</style>
================================================
FILE: src/components/SocialIndexList.vue
================================================
<template>
<div class="SocialIndexList" id="SocialIndexList">
<div class="IndexListType clearfix" id="IndexListType">
<div class="TypeTag fl">
<ul>
<li>
<a href="javascript:;" :class="{current:current == -1}" title="全部" data-tagid="" @click="GoTagsBtn('', -1)" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="all_select" wn_tj_click_id>全部</a>
</li>
<li v-for="(allTags,index) in allTags" >
<a href="javascript:;" :title="allTags.name" :data-tagid="allTags.id" @click="GoTagsBtn(allTags.id, index)" :class="{current:index == current}" wn_tj_click_href :wn_tj_click_excel="allTags.name" wn_tj_click_id>{{allTags.name}}</a>
</li>
</ul>
</div>
<div class="scrrenTag fr">
<h6 class="scrrenTagInput" @click="drownInput"><span>{{ordername}}</span><i :class="['rotatez',{'roate':drown === false}]"></i></h6>
<ul class="InputSelect" v-if="drown">
<li data-order="hot" @click="drownSelect('hot','热门排序')" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="hot_ordering" wn_tj_click_id>热门排序</li>
<li data-order="time" @click="drownSelect('time','时间排序')" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="time_ordering" wn_tj_click_id>时间排序</li>
</ul>
</div>
</div>
<div class="IndexListCont">
<ul>
<li v-for="(list, i) in list" :data-listId="list.id" :name="list.id">
<div class="Jitems">
<div class="Jitems-Title">
<router-link :to="{ name: 'post', params: {'circleId':circleId,'postId': list.id,'onPage':1}}" :title="list.title" :listId="list.id">{{list.title}}</router-link>
<i :class="['icon-gf',{'none':list.is_official == 0}]" title="官方">官方</i>
<i :class="['icon-top',{'none':list.is_top == 0}]" title="置顶">置顶</i>
<i class="icon-good" v-for="tags in list.tags" :title="tags.name" :class="tags.mark">{{tags.text}}</i>
</div>
<div class="Jitems-Detail" v-if="list.is_top != 1">
<h5 class="Jitems-Detail-text" v-html="list.text"></h5>
<div class="Jitems-Detail-img clearfix">
<div class="JDICont">
<div class="imgList" v-for="(img, index) in list.images" @click="ShowBigPic($event,index,i)">
<div class="imgfd"></div>
<img :src="img + '?x-oss-process=image/resize,h_110'" alt="刷新加载图片"/>
</div>
</div>
<div class="Jlist-thumb clearfix" v-if="list.images != ''" v-show="list.flag">
<div class="thumbHd"><a href="javascript:;" class="j_retract" @click="hidePic($event,i)"><i class="icon_retract"></i>收起</a> </div>
<div class="thumbWarp">
<div :class="['thumbWarpList',{none: list.showindex != index }]" v-for="(img, index) in list.images" >
<div class="thumbPrev" v-if="index != 0" :data-cur="index-1" @click="thumbPrev(index,i)"></div>
<div class="thumbsx" @click="hidePic2($event,i)"></div>
<img :src="img" alt="刷新查看" />
<div class="thumbNext" v-if="list.images.length-1 != index" :data-cur="index+1" @click="thumbNext(index,i)"></div>
</div>
</div>
</div>
<!-- <EnlargePicture :imagesList="list.images" :isCurrent="isCurrent" :isFlag="list.flag" :data-flag="list.flag"></EnlargePicture> -->
</div>
</div>
<div class="Jitems-Info">
<div class="JuserInfo fl">
<a href="javascript:;" class="JuserInfo-people default" :title="list.username">
<img :src="list.user_photo"/>
{{list.username}}
</a>
<span class="JuserInfo-time" :title="list.created_at">{{list.created_at}}</span>
</div>
<router-link class="JdataInfo fr" :to="{ name: 'post', params: {'circleId':circleId,'postId': list.id,'onPage':1}}">
<span class="Jview"><img src="../images/icon4.png"/>{{list.view_count}}</span>
<span class="Jreply"><img src="../images/icon5.png"/>{{list.comment_count}}</span>
</router-link>
</div>
</div>
</li>
</ul>
</div>
<div class="IndexPage">
<pagination :cur="cur" :all="all" :isJump="isJump" @listen="monitor" ref="page"></pagination>
</div>
<div class="selectMask" v-show="isSelectMask" @click="closeSelect()"></div>
</div>
</template>
<script>
import pagination from './pagination.vue'
import EnlargePicture from './EnlargePicture.vue'
export default {
name: 'SocialIndexList',
components: {
pagination: pagination,
EnlargePicture: EnlargePicture
},
watch: {
currentPage: 'requestData',
list: {
handler: function (val, oldval) {
// console.log(val)
}
}
},
ready () {
this.requestData()
window.addEventListener('scroll', this.handleScroll)
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},
data () {
return {
list: [],
allTags: [],
circleId: '',
cur: 1,
all: 1,
pageSize: 20,
tags: '',
order: 'time',
ordername: '时间排序',
drown: false,
current: -1,
isCurrent: 0,
showFlag: -1,
tumbCurrent: 0,
show: false,
scrolled: false,
isJump: true,
isSelectMask: false
}
},
methods: {
handleScroll: function (scroll) {
this.scrolled = scroll
},
hidePic: function (event, temp) {
this.list[temp]['flag'] = false
},
hidePic2: function (event, temp) {
this.list[temp]['flag'] = false
},
thumbNext: function (index, temp) { // 缩略图
this.list[temp]['showindex'] = index + 1
},
thumbPrev: function (index, temp) {
this.list[temp]['showindex'] = index - 1
},
ShowBigPic: function (event, index, temp) {
this.list[temp].flag = true
this.list[temp]['showindex'] = index
},
GoTagsBtn: function (tagId, index) { // 切换tag
this.current = index
this.tags = tagId
this.ShowHtml(this.order, 1)
this.$refs.page.send(1)
},
goTop: function () {
var gotoTop = function () {
var currentPosition = document.documentElement.scrollTop || document.body.scrollTop
currentPosition -= 80
if (currentPosition > 0) {
window.scrollTo(0, currentPosition)
} else {
window.scrollTo(0, 0)
clearInterval(timer)
timer = null
}
}
var timer = setInterval(gotoTop, 50)
},
monitor: function (data) { // 分页监听
this.ShowHtml(this.order, data)
this.goTop()
},
closeSelect: function () { // 关闭下拉框
this.isSelectMask = false
this.drown = false
},
drownInput: function () { // 下拉框排序
if (this.drown === true) {
this.drown = false
} else {
this.drown = true
this.isSelectMask = true
}
},
drownSelect: function (order, ordername) {
this.ordername = ordername
this.drown = false
this.isSelectMask = false
this.order = order
this.ShowHtml(this.order, 1)
this.$refs.page.send(1)
},
ShowHtml: function (order, page) {
const vm = this
vm.$http({
url: '//moment.snail.com/api/v1/post/list-of-circle-post',
method: 'jsonp',
params: {
'circle_id': this.circleId,
'tag_id': this.tags,
'order': order,
'page': page,
'pagesize': this.pageSize
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
for (var i in res.data.list) {
res.data.list[i]['flag'] = false
res.data.list[i]['showindex'] = 0
}
this.list = res.data.list
this.all = res.data.totalPage
if (res.data.totalPage === 0) {
this.all = 1
}
})
}
},
created: function () {
this.circleId = this.$route.params.circleId
// this.circleId = 8
window.addEventListener('scroll', this.handleScroll)
const vm = this
const Jdata = {
'circle_id': this.circleId,
'tag_id': this.tags,
'order': this.order,
'page': 1,
'pagesize': this.pageSize
}
vm.$http({
url: '//moment.snail.com/api/v1/post/list-of-circle-post',
method: 'jsonp',
params: Jdata,
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
for (var i in res.data.list) {
res.data.list[i]['flag'] = false
res.data.list[i]['showindex'] = 0
}
this.list = res.data.list
this.all = res.data.totalPage
if (res.data.totalPage === 0) {
this.all = 1
}
})
vm.$http({
url: '//moment.snail.com/api/v1/circle/all-tags',
method: 'jsonp',
params: {
'circle_id': this.circleId
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
this.allTags = res.body.tags
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import '../sass/stylesheets/SocialIndexList.css'
</style>
================================================
FILE: src/components/SocialIndexRecommend.vue
================================================
<template>
<div class="SocialIndexRecommend bgWhite" id="SocialIndexRecommend">
<div class="MoudleHd">
圈子推荐
<a href="javascript:;" class="Switch fr" @click="SwitchQz(onPage)" wn_tj_click_href wn_tj_click_gameId wn_tj_click_excel="community_change" wn_tj_click_id>换一换</a>
</div>
<div class="RecommentList clearfix">
<ul>
<li v-for="(list,temp) in list" :data-qzid="list.id">
<div class="ListGameName fl">
<img :src="list.icon" class="fl" alt="刷新查看"/>
<div class="NameBox fl">
<router-link :to="{ name: 'circle', params: {'circleId':list.id}}" :title="list.name" class="qzname textOverFlow" wn_tj_click_gameId wn_tj_click_href wn_tj_click_excel="community_recommendation" :wn_tj_click_id="list.id">{{list.name}}</router-link>
<h6 :title="list.description">{{list.description}}</h6>
</div>
</div>
<div class="ListGameBtn fr">
<a href="javascript:;" class="R_Join" v-if="!list.isJoined" @click="JoinQz(list.id,temp)" wn_tj_click_gameId wn_tj_click_href wn_tj_click_excel="join_community" :wn_tj_click_id="list.id"><img src="../images/icon3.png"/>加入</a>
<a href="javascript:;" class="R_nJoin" v-if="list.isJoined" @click="QuitQz(list.id,temp)"><span>已加入</span><span>退出</span></a>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'SocialIndexRecommend',
data () {
return {
list: [],
onPage: 1,
allPage: 1,
isJoined: false
}
},
methods: {
ShowLoginPop: function () {
document.getElementById('login_pop').style.display = 'block'
document.getElementById('stone_mask').style.display = 'block'
},
SwitchQz: function (qzId) {
if (this.onPage < this.allPage) {
this.onPage++
} else {
this.onPage = 1
}
const vm = this
vm.$http({
url: '//moment.snail.com/api/v1/circle/recommend-circles',
method: 'jsonp',
params: {'page': this.onPage},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
for (var i in res.data.list) {
res.data.list[i]['isJoined'] = false
}
this.list = res.data.list
this.allPage = res.data.totalPage
})
},
// Join quanzi
JoinQz: function (qzId, temp) {
if (document.getElementById('pdLogin').value === 'true') {
let JoinUrl = '//moment.snail.com/api/v1/circle/join'
this.JoinState(qzId, JoinUrl, 'join', temp)
} else {
this.ShowLoginPop()
}
},
QuitQz: function (qzId, temp) {
if (document.getElementById('pdLogin').value === 'true') {
let QuitUrl = '//moment.snail.com/api/v1/circle/leave'
this.JoinState(qzId, QuitUrl, 'quit', temp)
} else {
this.ShowLoginPop()
}
},
JoinState: function (qzId, url, flag, temp) {
const vm = this
vm.$http({
url: url,
method: 'jsonp',
params: {'circle_id': qzId},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (flag === 'join') {
this.list[temp]['isJoined'] = true
} else if (flag === 'quit') {
this.list[temp]['isJoined'] = false
}
})
}
},
created: function () {
const vm = this
vm.$http({
url: '//moment.snail.com/api/v1/circle/recommend-circles',
method: 'jsonp',
params: {'page': 1},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
for (var i in res.data.list) {
res.data.list[i]['isJoined'] = false
}
this.list = res.data.list
this.allPage = res.data.totalPage
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import '../sass/stylesheets/ScoialIndexRecommend.css'
</style>
================================================
FILE: src/components/pagination.vue
================================================
<template>
<div class="PageBar" id="PageBar">
<ul>
<li><a :class="setButtonClass(0)" @click="prvePage(curIndex)"><img src="../images/prev.png" alt="<"/></a></li>
<li v-for="(index,i) in indexs" :class="[{ active: curIndex == index },{point:index < 1}]">
<a @click="btnClick(index)">{{ index < 1 ? "..." : index }}</a>
</li>
<li class="next"><a :class="setButtonClass(1)" @click="nextPage(curIndex)"><img src="../images/next.png" alt=">"/></a></li>
<li class="JumpToPage" v-show="isJump">跳转到<input type="text" v-model="inputNum" onkeyup="value=value.replace(/[^\d.]+/,'')"/>页<span class="cur" @click="JumpGo(inputNum)">确定</span></li>
</ul>
</div>
</template>
<script>
export default {
name: 'PageBar',
props: ['cur', 'all', 'order', 'tags', 'isJump'],
data () {
return {
curIndex: this.cur,
inputNum: 1
}
},
watch: {
cur: function (value) {
console.log(value)
this.curIndex = this.cur
}
},
computed: {
indexs: function () {
var left = 1
var right = this.all
var ar = []
if (this.all >= 11) {
if (this.curIndex > 5 && this.curIndex < this.all - 4) {
left = parseInt(this.curIndex) - 5
right = parseInt(this.curIndex) + 4
} else {
if (this.curIndex <= 5) {
left = 1
right = 10
} else {
right = this.all
left = this.all - 9
}
}
}
while (left <= right) {
ar.push(left)
left++
}
if (ar[ar.length - 1] < this.all) {
ar[ar.length - 1] = this.all
ar[ar.length - 2] = 0
}
return ar
}
},
methods: {
// 页码点击事件
btnClick: function (data) {
if (data < 1) return
if (data !== this.curIndex) {
this.curIndex = data
this.$emit('listen', data)
}
},
// 下一页
nextPage: function (data) {
if (this.curIndex >= this.all) return
this.btnClick(parseInt(this.curIndex) + 1)
},
// 上一页
prvePage: function (data) {
if (this.curIndex <= 1) return
this.btnClick(parseInt(this.curIndex) - 1)
},
// 设置按钮禁用样式
setButtonClass: function (isNextButton) {
if (isNextButton) {
return this.curIndex >= this.all ? 'page-button-disabled' : ''
} else {
return this.curIndex <= 1 ? 'page-button-disabled' : ''
}
},
send: function (page) {
this.btnClick(page)
},
JumpGo: function (page) {
if (page <= this.all) {
this.btnClick(page)
} else {
// alert('没有了')
}
}
},
created: function () {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.PageBar {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
margin-top:37px;
font-size: 0;
}
.PageBar li {
list-style: none;
display: inline-block;
margin:0;
}
.PageBar li:first-child > a {
margin-left: 0px;
}
.PageBar .point a{
border:none;
cursor: default;
border-left:1px solid rgb(238, 240, 241);
}
.PageBar .point a:hover{
background: none;
}
.PageBar a {
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
font-size: 12px;
color: rgb(167, 167, 167);
background: #fff;
border: 1px solid #ccc;
margin-right:4px;
cursor: pointer;
}
.PageBar a:hover {
border-color: #00aaff;
color:#00aaff;
}
/*.PageBar li:last-child a{
border-right: 1px solid rgb(238, 240, 241);
}*/
/*.PageBar li.next a{
border-right: 1px solid rgb(238, 240, 241);
}*/
.PageBar .active a {
color: #fff;
cursor: default;
border-color:#00aaff;
background:#00aaff;
}
.PageBar i {
font-style: normal;
color: #d44950;
margin: 0px 4px;
font-size: 12px;
}
.PageBar .page-button-disabled{
background:#f7f9fa;
cursor: not-allowed;
color:#ddd !important;
border-color:#e6e6e6;
}
.PageBar .page-button-disabled:hover{
background:#f7f9fa;
border-color:#e6e6e6;
}
.PageBar .JumpToPage{
font-size: 12px;
font-family: "Microsoft YaHei";
color: rgb(128, 128, 128);
margin-left:20px;
}
.PageBar .JumpToPage input[type="text"]{
border:1px solid rgb(204, 204, 204);
background-color: rgba(255, 85, 0, 0);
width: 32px;
height: 24px;
/*line-height: 34px;*/
text-align: center;
padding:5px;
margin:0 8px;
}
.PageBar .JumpToPage span{
position: relative;
top:2px;
font-size: 15px;
display: inline-block;
border:1px solid rgb(204, 204, 204);
border-radius: 11px;
background-color: rgba(255, 85, 0, 0);
width: 62px;
height: 36px;
text-align: center;
line-height: 36px;
margin-left:10px;
}
.PageBar .JumpToPage span:hover{
border-color:#00aaff;
color:#00aaff;
}
</style>
================================================
FILE: src/components/rulePop.vue
================================================
<template>
<div class="pop" id="pop">
<div :class="['rulePop Jrule animate', {'pb40':isPopInfo.isPopTsShow == 5}]" v-show="isPopInfo.isPopShow">
<div class="rulePop-Hd">
提示<img src="../images/close.png" class="fr cur" alt="关闭" @click="closePop()"/>
</div>
<div class="rulePop-Cont">
<p :class="{'none':isPopInfo.isPopTsShow !== 2}">确定删除这条帖子嘛？</p>
<p :class="{'none':isPopInfo.isPopTsShow !== 3}">确定删除这条评论嘛？</p>
<p :class="{'none':isPopInfo.isPopTsShow !== 0}">{{DetailLandlord.is_top === 1 ? '确定取消这条帖子的置顶嘛？' : '确定置顶这条帖子嘛？'}}</p>
<p :class="{'none':isPopInfo.isPopTsShow !== 4}">{{DetailLandlord.is_official === 1 ? '确定取消这条帖子为官方贴子嘛？' : '确定将其设置为官方帖子嘛？'}}</p>
<!-- <p :class="{'none':isPopInfo.isPopTsShow !== 5}">确定将其设为FAQ贴嘛？</p> -->
<div :class="['ruleSelect', {'none':isPopInfo.isPopTsShow !== 1}]">
<div :class="{'none':DetailLandlord.public_tags_length === 1}">
<span class="fl">请设置精华帖分类</span>
<div class="ruleSelectBox fr">
<div class="ruleSelectInput cur" @click="ruleSelectInput()" :data-tagId="tagId">{{tagName}}</div>
<i :class="['rotatez',{'roate': isSelect === true}]"></i>
<ul class="ruleSelectDrown" v-show="isRuleSelectDrown">
<li class="cur" @click="SelectDrown(list.id, list.name)" v-for="(list, index) in publicTags" :data-tagId="list.id" :title="list.name">{{list.name}}</li>
</ul>
</div>
</div>
<div :class="{'none':DetailLandlord.public_tags_length === 0}">确定取消这条评论的加精嘛？</div>
</div>
<div :class="['faqBox', {'none':isPopInfo.isPopTsShow !== 5}]">
<h4>设置FAQ</h4>
<div class="faqCont">
<div class="faqContList">
<div class="faqLeft">问题大类：</div>
<div class="faqRight">
<select id="top_category_id" @change="changeTop()">
<option v-for="list in top_category_id_list" :value="list.id" >{{list.name}}</option>
</select>
</div>
</div>
<div class="faqContList">
<div class="faqLeft">二级分类大类：</div>
<div class="faqRight">
<select id="second_category_id">
<option v-for="list in second_category_id_list" :value="list.id">{{list.name}}</option>
</select>
</div>
</div>
<div class="faqContList">
<div class="faqLeft">问题名称：</div>
<div class="faqRight">
<input type="text" placeholder="填写问题名称" id="faqtitle"/>
</div>
</div>
<p class="faqerr" v-if="faqerror">{{faqerrtext}}</p>
</div>
</div>
</div>
<div class="rulePop-Bt">
<span class="ruleSure cur" @click="submit(isPopInfo.isPopTsShow)">确定</span>
<span class="ruleCannle cur" @click="closePop()">取消</span>
</div>
</div>
<!-- <div class="rulePop Crule"></div> -->
<div class="divmask" v-show="isPopInfo.isMaskShow"></div>
</div>
</template>
<script>
export default {
name: 'pop',
props: ['isPopInfo', 'DetailLandlord', 'cur'],
// props: {
// isPopInfo: {
// type: Object
// },
// DetailLandlord: {
// type: Array
// }
// },
watch: {
},
data () {
return {
publicTags: [],
postId: '',
circleId: '',
isPopShowr: false,
isMaskShowr: false,
isSelect: true,
isTop: false,
isDelete: false,
isClassify: false,
isRuleSelectDrown: false,
tagId: '',
tagName: '',
top_category_id: '',
top_category_id_list: [],
second_category_id: '',
second_category_id_list: [{
id: '',
name: '选择二级分类大类'
}],
faq_title: '',
medicine: '',
faqerror: false,
faqerrtext: '对不起,请填写必填选项'
}
},
methods: {
submit: function (index) { // 提交
var data, url
if (index === 0) { // 置顶
data = {
post_id: this.postId
}
url = '//moment.snail.com/api/v1/post/top'
this.PostAjax(url, data, 0)
} else if (index === 1) { // 加精
if (this.DetailLandlord.public_tags.length !== 0) {
data = {
post_id: this.postId
}
url = 'http://moment.snail.com/api/v1/post/cancel-cream'
} else {
data = {
post_id: this.postId,
private_tag_id: this.tagId
}
url = '//moment.snail.com/api/v1/post/set-cream'
}
this.PostAjax(url, data, 1)
} else if (index === 2) { // 删除主贴
data = {
post_id: this.postId
}
url = '//moment.snail.com/api/v1/post/delete'
this.PostAjax(url, data, 2)
} else if (index === 3) { // 删除评论
data = {
comment_id: this.isPopInfo.commentId
}
url = '//moment.snail.com/api/v1/comment/delete'
this.PostAjax(url, data, 3)
} else if (index === 4) { // 设为官方贴
data = {
post_id: this.postId
}
if (this.DetailLandlord.is_official === 1) {
url = '//moment.snail.com/api/v1/post/cancel-official'
} else {
url = '//moment.snail.com/api/v1/post/set-official'
}
this.PostAjax(url, data, 4)
} else if (index === 5) { // 设为FAQ
var topid = document.getElementById('top_category_id').value
var secid = document.getElementById('second_category_id').value
var faqtitle = document.getElementById('faqtitle').value
if (topid && secid && faqtitle) {
data = {
post_id: this.postId,
top_category_id: topid,
second_category_id: secid,
faq_title: faqtitle
}
url = '//moment.snail.com/api/v1/faq/set'
this.PostAjax(url, data, 5)
} else {
this.faqerror = true
}
}
},
closePop: function () { // 关闭弹窗
this.isPopInfo.isPopShow = false
this.isPopInfo.isMaskShow = false
this.isRuleSelectDrown = false
},
ruleSelectInput: function () { // 显示下拉框
if (this.isRuleSelectDrown === true) {
this.isRuleSelectDrown = false
this.isSelect = true
} else {
this.isRuleSelectDrown = true
this.isSelect = false
}
},
SelectDrown: function (tagId, tagName) {
this.isRuleSelectDrown = false
this.isSelect = true
this.tagId = tagId
this.tagName = tagName
},
PostAjax: function (url, data, temp) {
var vm = this
vm.$http({
url: url,
method: 'jsonp',
params: data,
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
this.isPopInfo.isPopShow = false
this.isPopInfo.isMaskShow = false
if (temp === 0) { // 置顶
if (this.DetailLandlord.is_top === 0) {
this.DetailLandlord.is_top = 1
} else {
this.DetailLandlord.is_top = 0
}
}
if (temp === 1) { // 加精
var ob = [{
mark: 'cream',
name: '精华',
text: '精'
}]
// this.$router.go({name: '/post', params: {circleId: this.circleId, postId: this.postId}})
if (this.DetailLandlord.public_tags_length === 1) {
this.DetailLandlord.public_tags = ''
this.DetailLandlord.public_tags_length = 0
} else {
console.log(this.DetailLandlord.public_tags, ob)
this.DetailLandlord.public_tags = ob
this.DetailLandlord.public_tags_length = 1
}
}
if (temp === 3) { // 加精
this.$emit('abc', 'dddd')
// this.$router.go({name: '/SocialDetail', params: {circleId: this.circleId, postId: this.postId}})
}
if (temp === 4) { // 官方贴
if (this.DetailLandlord.is_official === 0) {
this.DetailLandlord.is_official = 1
} else {
this.DetailLandlord.is_official = 0
}
}
if (temp === 2) {
this.$router.push({name: 'circle', params: {circleId: this.circleId}})
}
if (temp === 5) { // FAQ
this.DetailLandlord.is_faq_setup = true
}
})
},
changeTop: function () {
this.faqerror = false
var id = document.getElementById('top_category_id').value
if (id) {
this.getSecond(id)
} else {
var ts = [{
id: '',
name: '选择二级分类大类'
}]
this.second_category_id_list = ts
}
},
getSecond: function (id) {
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/faq/get-second-categorys',
method: 'jsonp',
params: {
'top_category_id': id
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.status === 200) {
this.second_category_id_list = res.data.result
}
})
}
},
created: function () {
this.postId = this.$route.params.postId
this.circleId = this.$route.params.circleId
var vm = this
vm.$http({
url: '//moment.snail.com/api/v1/circle/private-tags',
method: 'jsonp',
params: {
'circle_id': this.circleId
},
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
this.publicTags = res.data.tags
this.tagId = this.publicTags[0].id
this.tagName = this.publicTags[0].name
})
vm.$http({
url: '//moment.snail.com/api/v1/faq/get-top-categorys',
method: 'jsonp',
jsonp: 'callback',
emulateJSON: true,
headers: {
'Content-Type': 'x-www-from-urlencoded'
}
}).then(function (res) {
if (res.status === 200) {
var ts = {
id: '',
name: '选择问题大类'
}
res.data.result.unshift(ts)
this.top_category_id_list = res.data.result
console.log(this.top_category_id_list)
}
})
}
}
</script>
<style scoped>
@import '../sass/stylesheets/SocialPop.css'
</style>
================================================
FILE: src/main.js
================================================
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.config.productionTip = false
Vue.http.interceptors.push((request, next) => {
request.credentials = true
next()
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
================================================
FILE: src/router/index.js
================================================
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/Index'
import SocialIndex from '@/SocialIndex'
import SocialDetail from '@/SocialDetail'
import SocialPost from '@/SocialPost'
Vue.use(Router)
export default new Router({
// mode: 'history',
// hashbang: false,
// history: false,
routes: [
{
path: '/',
name: 'index',
component: Index,
meta: {
title: '这是个圈子',
keepAlive: false
}
},
{
path: '/index',
name: 'index',
component: Index,
meta: {
title: '这是个圈子',
keepAlive: false
}
},
{
path: '/circle/:circleId',
name: 'circle',
component: SocialIndex,
meta: {
title: '这是个圈子',
keepAlive: false
}
},
{
path: '/post/:circleId/:postId/:onPage',
name: 'post',
component: SocialDetail,
meta: {
title: '这是个圈子',
keepAlive: false
}
},
{
path: '/SocialPost/:circleId',
name: 'SocialPost',
component: SocialPost,
meta: {
title: '这是个圈子',
keepAlive: false
}
}
]
})
================================================
FILE: src/sass/config.rb
================================================
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
================================================
FILE: src/sass/sass/IndexList.scss
================================================
@-webkit-keyframes mymove
{
from {top:0px;}
to {top:230px;}
}
@keyframes mymove
{
from {top:0px;}
to {top:230px;}
}
@-moz-keyframes mymove
{
from {top:0px;}
to {top:230px;}
}
#IndexList .fixed{
position: fixed;
animation:mymove 2s normal;
-webkit-animation:mymove 2s normal;
-moz-animation:mymove 2s normal;
-ms-animation:mymove 2s normal;
}
.IndexList{
width:700px;
padding:17px 0 33px;
.IndexListType{
width:661px;
top:0;
z-index:3;
height: 15px;
padding:17px 19px;
border-bottom: 1px solid #e6e7eb;
background:#fff;
.TypeTag{
height: 15px;
line-height:15px;
width: 540px;
ul{
height: 20px;
margin-top:-5px
}
li{
float: left;
min-width:55px;
margin-right:20px;
height: 20px;
line-height:20px;
padding-bottom:15px;
border-bottom:4px solid #0099e5;
}
}
}
.IndexListCont{
width:100%;
height:auto;
li{
position: relative;
min-height:72px;
padding:30px 19px;
border-bottom: 1px solid #e6e7eb;
&::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
z-index: 0;
opacity: 0;
background-color: rgba(164, 168, 195, 0.5);
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
&:hover::before{
// opacity: 0.2;
// width: 100%;
}
.Jitems{
position:relative;
height: auto;
width: 100%;
z-index: 1;
}
.Jitems-Title{
width:100%;
height: 30px;
a,i{
display: inline-block;
}
a{
max-width:520px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
color:#585858;
text-align: left;
margin-right: 5px;
&:hover{
//text-decoration: underline;
color:#00aaff;
}
}
}
.Jitems-Name{
height: 40px;
line-height: 40px;
width: 100%;
margin-bottom: 15px;
.Indexlist_join , .Indexlist_ujoin{
width: 62px;
height: 26px;
line-height: 26px;
font-size: 12px;
color: rgb(88, 88, 88);
border: 1px solid rgb(234, 236, 239);
background-color: rgba(40, 215, 250, 0);
}
.Indexlist_join{
color: #fff;
background: #00aaff;
border-color: #00aaff;
img{
margin-right:5px;
}
}
.Indexlist_ujoin{
span:first-child{
display: inline-block;
}
span:last-child{
display: none;
}
&:hover{
span:first-child{
display: none;
}
span:last-child{
display: inline-block;
}
}
}
.qzicon{
width: 40px;
height: 40px;
border-radius:50%;
overflow: hidden;
margin-right:15px;
}
.Qzname{
font-size: 14px;
color: rgb(64, 64, 64);
font-weight: bold;
margin-right:15px;
&:hover{
color:#0099e5
}
}
}
.Jitems-Detail{
width:100%;
min-height: 27px;
margin-bottom: 10px;
.Jitems-Detail-text{
font-size: 14px;
color: rgb(167, 167, 167);
max-height: 30px;
max-width:100%;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 24px;
p{
font-size: 14px !important;
color: rgb(167, 167, 167) !important;
}
}
.Jitems-Detail-img{
position:relative;
width:100%;
.JDICont{
position: relative;
z-index: 4;
max-height: 110px;
width:100%;
overflow: hidden;
}
}
.imgList{
position:relative;
display: inline-block;
max-width:156px;
text-align: left;
height: 110px;
overflow:hidden;
margin-right:10px;
.imgfd{
position:absolute;
top:0;
left:0;
display: none;
width: 100%;
height: 100%;
background:rgba(0,0,0,0) url(../../images/icon-max.png) no-repeat center;
}
&:hover .imgfd{
display: inline-block;
}
img{
display: inline-block;
cursor: -webkit-zoom-in;
cursor: zoom-in;
max-height: 100%;
//max-width:100%;
}
}
}
.Jitems-Info{
width:100%;
height:20px;
.JuserInfo{
min-width:160px;
max-width: 400px;
a{
display: inline-block;
position: relative;
line-height:20px;
font-size: 12px;
color: rgb(102, 102, 102);
}
img{
position: relative;
top:4px;
display: inline;
width:20px;
height:20px;
border-radius:50%;
}
.JuserInfo-time{
font-size: 12px;
color: rgb(167, 167, 167);
border-left:1px solid rgb(238, 238, 238);
margin-left:5px;
padding-left:10px;
}
}
.JdataInfo{
display: inline-block;
height: 20px;
line-height: 20px;
font-size: 12px;
color: rgb(167, 167, 167);
margin-top:4px;
span{
margin-right:20px;
img{
margin-right:5px;
}
}
}
}
}
}
.Jlist-thumb{
// display: none;
position:relative;
margin-top:-110px;
width: 632px;
min-height:100px;
padding: 10px;
background: #f7f7f7;
border: 1px solid #e4e6eb;
z-index:5;
cursor: normal;
.thumbHd{
height: 25px;
width:100%;
border-bottom:1px solid #e4e6eb;
text-align: left;
a{
float: left;
font-size: 12px;
color: #2d64b3;
text-align: left;
box-sizing:content-box;
i{
display: inline-block;
position:relative;
top:-1px;
width: 20px;
height: 20px;
vertical-align: middle;
background:url(../../images/thread_list_z_eca48fe.png);
background-position: 0px -30px;
}
}
}
.thumbWarp{
position:relative;
width:632px;
height: 90%;
padding: 1% 0;
margin-top:10px;
text-align: center;
display: table-cell;
vertical-align: middle;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
img{
display: inline-block;
max-width: 100%;
cursor: -webkit-zoom-out;
cursor: zoom-out;
}
.thumbsx{
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
z-index: 5;
&:hover{
cursor: normal;
background:rgba(0,0,0,0.05) url(../../images/icon-mini.png) no-repeat center;
}
}
.thumbWarpList{
position:relative;
margin-top:10px;
overflow:hidden;
width:632px;
}
.thumbNext,
.thumbPrev{
position:absolute;
top:0;
width:20%;
height: 100%;
cursor: pointer;
z-index: 6;
}
.thumbPrev{
left:0;
&:hover{
background:rgba(0,0,0,0.01) url(../../images/icon-left.png) no-repeat center;
}
}
.thumbNext{
right: 0;
&:hover{
background:rgba(0,0,0,0.01) url(../../images/icon-right.png) no-repeat center;
}
}
}
}
}
.selectMask{
position:fixed;
width: 100%;
height:100%;
top:0;
left:0;
z-index: 100003;
}
.drownbox {
width: 100%;
margin:30px auto 0;
height: 60px;
text-align: center;
span{
width: 80px;
height: 20px;
line-height: 20px;
display: inline-block;
font-size: 14px;
font-family: "Microsoft YaHei";
color: rgb(128, 128, 128);
}
}
.goDrown{
cursor: pointer;
padding-right:10px;
background:url(../../images/icon18.png) no-repeat center right;
&:hover{
color:#0099fe;
background:url(../../images/icon18_hover.png) no-repeat center right;
}
}
.spinner8 {
margin: 0 auto;
width: 60px;
height: 60px;
position: relative;
}
.container1 > div, .container2 > div, .container3 > div {
width: 16px;
height: 16px;
background-color: #0099fe;
border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner8 .spinner-container {
position: absolute;
width: 100%;
height: 100%;
}
.container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.container3 .circle1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
================================================
FILE: src/sass/sass/LoginPop.scss
================================================
.LoginPop{
// display: none;
position: fixed;
right: 0;
left: 0;
top: 220px;
width: 340px;
margin: 0 auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
background-color: #f5f6f8;
z-index: 100;
}
.banner .prev, .banner .next{
z-index: 8 !important;
}
.LoginPop .LoginPop_outer{
position: relative;
width: 100%;
height: 100%;
padding:40px;
box-sizing: border-box;
}
.LoginPop .LoginPop_cancle{
position: absolute;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
background: url('http://www.iplaystone.com/static/common/images/cancel.png');
cursor: pointer;
}
.LoginPop .LoginPop_title{
font-size: 14px;
color: white;
text-align: center;
margin-bottom: 30px;
}
.LoginPop_title img{
display: inline-block;
}
.LoginPop .LoginPop_input{
position: relative;
width: 100%;
height: 58px;
}
.LoginPop .LoginPop_input .LoginPop_error{
display: none;
height: 20px;
padding-left: 15px;
color: red;
background: url('http://www.iplaystone.com/static/common/images/error.png') left no-repeat;
}
.LoginPop .LoginPop_input > input{
width: 100%;
height: 38px;
border: 1px solid rgb(240, 241, 242);
background-color: rgb(240, 241, 242);
outline: none;
padding: 0 15px 0 30px;
color: rgb(128, 128, 128);
box-sizing: border-box;
}
.LoginPop .LoginPop_input > input:focus{
border-color:#00aaff;
}
.LoginPop .LoginPop_input .LoginPop_icon{
position: absolute;
top: 13px;
left: 10px;
width: 13px;
height: 13px;
}
.LoginPop .LoginPop_input .LoginPop_user{
background: url('http://www.iplaystone.com/static/common/images/user.png') no-repeat;
}
.LoginPop .LoginPop_input .LoginPop_pwd{
background: url('http://www.iplaystone.com/static/common/images/key.png') no-repeat;
}
.LoginPop .LoginPop_btn{
width: 100%;
height: 46px;
margin: 30px 0 15px 0;
}
.LoginPop .LoginPop_btn > button{
width: 100%;
height: 100%;
text-align: center;
background-color: white;
border: none;
color: white;
background: url('http://www.iplaystone.com/static/common/images/btn_normal.png');
cursor: pointer;
}
/* .LoginPop .LoginPop_btn > button:hover{
background: url('../images/btn_hover.png');
}*/
.LoginPop .LoginPop_forget,
.LoginPop .LoginPop_register {
font-size: 12px;
}
.LoginPop .LoginPop_forget{
/*float: left;*/
color: #808080;
}
.LoginPop .LoginPop_register{
/*float: right;*/
color: #5a9ddf;
}
.LoginPop .LoginPop_box{
text-align: center;
}
.LoginPop_box span{
display: inline-block;
height: 15px;
width: 1px;
background: #999;
margin: 0 20px;
position: relative;
top: 3px;
}
================================================
FILE: src/sass/sass/ScoialIndexRecommend.scss
================================================
.SocialIndexRecommend{
width:240px;
background:#fff;
top:230px;
padding:15px 19px;
margin-bottom: 20px;
transition: all .3s linear;
-ms-transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
.MoudleHd{
a{
background:url(../../images/icon2.png) no-repeat right 6px;
&:hover{
color:#00aaff;
}
}
}
.RecommentList{
width:100%;
height:auto;
ul{
width:100%;
height:100%;
padding:30px 0 20px 0;
li{
height: 50px;
width: 100%;
margin-bottom: 15px;
&:last-child{
margin-bottom: 0;
}
.ListGameName{
width:182px;
height: 100%;
img{
width:50px;
height: 50px;
border-radius: 5px;
margin-right:10px;
}
}
.NameBox{
width: 117px;
.qzname{
display: inline-block;
height: 30px;
width: 100%;
text-align: left;
font-size: 14px;
color: rgb(88, 88, 88);
line-height: 2.2;
}
h6{
font-size: 12px;
color: #8c8c8c;
width: 117px;
height:20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.ListGameBtn{
width: 56px;
height: 26px;
margin-top:9px;
a{
display: inline-block;
width:100%;
height: 100%;
font-size: 12px;
text-align: center;
line-height: 26px;
}
.R_nJoin{
color:rgb(88, 88, 88);
border: 1px solid rgb(234, 236, 239);
background-color: rgba(170, 178, 189, 0);
}
.R_Join{
color:#fff;
background:#00aaff;
img{
margin-right:3px;
}
}
.R_nJoin{
span:first-child{
display: inline-block;
}
span:last-child{
display: none;
}
&:hover{
span:first-child{
display: none;
}
span:last-child{
display: inline-block;
}
}
}
}
}
}
}
}
@-webkit-keyframes mymove
{
from {top:0px;}
to {top:270px!important;}
}
@keyframes mymove
{
from {top:0px;}
to {top:270px!important;}
}
@-moz-keyframes mymove
{
from {top:0px;}
to {top:270px!important;}
}
.fixed3{
position: fixed;
top:270px;
animation:mymove 2s normal;
-webkit-animation:mymove 2s normal;
-moz-animation:mymove 2s normal;
-ms-animation:mymove 2s normal;
}
================================================
FILE: src/sass/sass/SocialDetail.scss
================================================
.SocialDetail{
position: relative;
width:100%;
font-family: "Microsoft YaHei";
.h5{
height: 100%;
display: inline-block;
color:#333;
text-align: left;
}
.MainList{
width: 702px;
.ListCont{
position: relative;
}
}
.Jtitle{
top: 0;
width: 662px;
height: 16px;
padding: 20px 19px;
z-index: 3;
border-bottom: 1px solid #eaeced;
margin-bottom: -1px;
h5{
display: inline-block;
max-width:330px;
font-family: "Microsoft YaHei";
font-size: 16px;
color: rgb(64, 64, 64);
}
.icon-good{
// top:-3px;
}
.Jtitle-Moudle{
margin-top: -5px;
span{
display: inline-block;
text-align: center;
font-size: 12px;
min-width: 63px;
color: rgb(88, 88, 88);
border:1px solid rgb(234, 236, 239);
background-color: rgba(214, 223, 250, 0);
padding:6px 8px;
cursor: pointer;
margin-right:10px;
img{
position: relative;
display: inline-block;
margin-right:5px;
top:2px;
}
&:hover{
background-color: rgb(245, 246, 247);
}
}
.onLandlord{
border-color:#00aaff;
color:#00aaff;
}
}
}
}
.ListPage{
position: relative;
height:23px;
padding:13px;
background:#fff;
margin-bottom: 16px;
.goBack{
position:absolute;
right:13px;
top:18px;
font-size: 12px;
color: rgb(0, 153, 229);
img{
margin-right:5px;
}
}
}
#SocialDetail .PageBar .JumpToPage{
margin-left:5px!important;
}
#SocialDetail .PageBar .JumpToPage input[type="text"]{
width: 20px!important;
height:11px!important;
// line-height: 20px!important;
padding:5px!important;
margin:0 5px!important;
}
#SocialDetail .PageBar .JumpToPage span{
top:1px!important;
font-size: 12px!important;
width: 40px!important;
height:22px!important;
line-height: 22px!important;
padding:0 5px;
margin-left:5px!important;
}
#SocialDetail .ListPage .PageBar{
text-align: left !important;
margin: 0 !important;
}
#SocialDetail .ListPage .PageBar a {
width:28px !important;
height: 22px !important;
line-height: 22px !important;
// border-right: 1px solid rgb(238, 240, 241) !important;
margin-right: 5px;
}
#SocialDetail .ListPage .PageBar .point a{
border: none;
cursor: default;
border: none !important;
}
.ListContUl{
width:100%;
height: 100%;
.ListContUlLi{
position:relative;
background: #fff;
margin-bottom: 16px;
padding:30px 19px;
.user-lz{
position:absolute;
top:0;
left:0;
}
.Jitems{
width:100%;
height:auto;
}
}
.isSelf{
border-color:#00aaff;
}
.JitemsLeft{
width:85px;
height: auto;
.J-UserInfo{
width:100%;
height:100%;
text-align: center;
.J-UserInfo-Pic{
display: inline-block;
width:60px;
height: 60px;
border-radius:50%;
overflow: hidden;
img{
width:60px;
height: 60px;
}
}
span{
display: inline-block;
width: 100%;
height: 15px;
font-size: 12px;
color: rgb(77, 77, 77);
margin-top:10px;
}
.J-UserInfo-adminCall{
font-size: 12px;
width: 52px;
height: 20px;
line-height: 20px;
background:#0099e5;
color:#fff;
}
}
}
.JitemsRight{
width:565px;
height: auto;
.J-TextCont{
margin-bottom: 30px;
font-size: 14px;
color: rgb(64, 64, 64);
line-height: 1.714;
text-align: left;
min-height: 120px;
word-break: break-all;
> * , p > * , div > *{
font-size: 14px !important;
color: #404040!important;
line-height: 1.714!important;
}
a{
text-decoration:underline;
color: #4c69ff!important;
margin:0 2px;
}
img{
max-width: 100%;
margin: 20px 0;
}
}
.J-ClickUp{
height: 48px;
width: 98px;
border:1px solid rgb(238, 238, 238);
background-color: rgba(238, 238, 238, 0);
border-radius: 25px;
text-align: center;
font-size: 14px;
color: rgb(128, 128, 128);
cursor: pointer;
margin:0 auto;
margin-bottom: 50px;
p{
height: 15px;
&:first-child{
margin-top:8px;
margin-bottom: 5px;
background:url(../../images/icon7.png) no-repeat center;
}
}
&:hover{
border-color:rgb(0, 170, 255);
p{
color: rgb(0, 170, 255);
&:first-child{
background:url(../../images/icon8.png) no-repeat center;
}
}
}
}
.J-On{
border-color:rgba(0,0,0,0);
background:url(../../images/icon9.png) no-repeat center;
p{
color:#fff;
&:first-child{
background:url(../../images/icon10.png) no-repeat center;
}
}
&:hover{
border-color:rgba(0,0,0,0);
p{
color:#fff;
&:first-child{
background:url(../../images/icon10.png) no-repeat center;
}
}
}
}
.J-Modle{
width: 100%;
height:auto;
.J-Modle-Hd{
width:100%;
height:20px;
font-size: 13px;
color: rgb(128, 128, 128);
.Hd-Floor span{
margin-right:10px;
}
}
.Hd-Moudle{
li{
position:relative;
float:left;
padding:0 10px;
height:16px;
line-height: 16px;
text-align: center;
border-right:1px solid #eef0f1;
&:last-child{
border-right:none;
}
span{
cursor: pointer;
b{
// color:#0099e5;
}
&:hover{
// text-decoration: underline;
color:#00aaff;
}
}
i{
position: relative;
top: 4px;
right: -5px;
display: inline-block;
width: 0;
height: 2px;
border: solid;
border-width: 4px;
border-color: #8c8c8c transparent transparent transparent;
transition: all .3s linear;
-webkit-transition: all .3s linear;
-ms-transition: all .3s linear;
-moz-transition: all .3s linear;
transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
margin-left: 1px;
margin-right: 5px;
}
.rotate{
top:-3px;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.adminlist{
position:absolute;
left:1px ;
top:25px;
width:98px;
min-height: 30px;
border:1px solid rgb(198, 198, 204);
font-size: 12px;
color: rgb(89, 89, 89);
line-height: 2.5;
text-align: center;
background:#fff;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
z-index: 1000004;
p{
height: 30px;
&:hover{
background-color: rgb(235, 236, 237);
}
}
}
}
.PostManagement{
padding-left:18px;
background:url(../../images/icon12.png) no-repeat center left;
&:hover{
background:url(../../images/icon12_hover.png) no-repeat center left;
i{
border-color: #00aaff transparent transparent transparent;
}
}
}
img{
width: 12px;
height: 12px;
display: inline-block;
position: relative;
top:1px;
margin-right: 5px;
}
.Hd-Moudle-Praise{
padding-left:15px;
background:url(../../images/icon11.png) no-repeat center left;
&:hover{
background:url(../../images/icon11_hover.png) no-repeat center left;
color:#0099e5;
}
}
.Hd-Moudle-Praise-On{
background:url(../../images/icon11_hover.png) no-repeat center left;
color:#0099e5;
}
.Hd-Moudle-Reply{
padding-left:17px;
background:url(../../images/icon6.png) no-repeat center left;
&:hover{
background:url(../../images/icon6_hover.png) no-repeat center left;
color:#0099e5;
}
}
}
}
.J-Moudle-List{
padding:20px 15px;
background:#f5f6f7;
margin-top:20px;
.J-Moudle-List-Cont{
width:100%;
height:100%;
ul{
width:100%;
height: 100%;
li{
padding:15px 0;
border-bottom:1px dotted rgb(221, 221, 222);
&:last-child{
border-bottom:none;
}
}
}
}
.Jmoude-items{
width: 100%;
height: auto;
}
.Jmoude-items-Pic{
width:30px;
height: 30px;
border-radius:50%;
overflow: hidden;
img{
width:30px;
height: 30px;
}
}
.Jmoude-items-Cont{
width: 495px;
height: auto;
font-size: 12px;
color:#333;
a{
color: rgb(0, 153, 229);
float: left;
}
span{
word-wrap: break-word;
}
.Jmoudle-items-h5{
min-height:15px;
margin-bottom:5px;
line-height: 1.3;
font-family: "Microsoft YaHei";
.twouser{
margin:0 5px;
}
b{
font-style: normal;
font-weight: normal;
}
}
.Jmoudle-items-info{
color: rgb(129, 129, 129);
}
}
.J-Moudle-List-More{
font-size: 12px;
line-height: 30px;
color: rgb(0, 153, 229);
width:100px;
}
.J-Moudle-List-Cont-Jet{
width:100%;
height:30px;
.J-Moudle-Mebtn{
font-size: 12px;
color: rgb(77, 77, 77);
text-align: center;
height: 28px;
line-height: 28px;
width:80px;
border:1px solid rgb(204, 204, 204);
background-color: rgba(0, 153, 229, 0);
border-radius:2px;
&:hover{
background-color: rgba(0, 0, 0, 0.031);
}
}
}
.J-Moudle-List-Input{
position:relative;
width:100%;
height:80px;
margin-top:18px;
.loginMask{
background:url(../../images/filter2.png);
.loginMaskBox{
padding-top:30px;
}
}
.J-Moudle-List-Input-Box{
border:1px solid #ddddde;
input{
background:#fff;
border:none;
height:10px;
width:509px;
outline: none;
padding:12px;
}
}
.J-Moudle-List-Input-Set{
width: 100%;
height: 26px;
margin-top:15px;
.J-M-L-Btn{
font-size:13px;
color:#fff;
width: 60px;
height: 26px;
text-align: center;
line-height: 26px;
background-color: rgb(0, 153, 229);
}
.J-M-l-I-S-Icon{
position:relative;
width: 18px;
height: 18px;
.Icon-List{
position:absolute;
top:0;
left:30px;
width:200px;
height: 200px;
border:1px solid #999;
background:#fff;
border-radius:3px;
}
}
}
}
}
}
}
@-webkit-keyframes mymove
{
from {top:0px;}
to {top:140px!important;}
}
@keyframes mymove
{
from {top:0px;}
to {top:140px!important;}
}
@-moz-keyframes mymove
{
from {top:0px;}
to {top:140px!important;}
}
#SocialDetail .fixed2{
position: fixed;
top:140px !important;
animation:mymove 2s normal;
-webkit-animation:mymove 2s normal;
-moz-animation:mymove 2s normal;
-ms-animation:mymove 2s normal;
}
.MainModule{
.SocialIndexRecommend{
}
}
.loginMask{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
background:url(../../images/filter.png);
text-align:center;
z-index:99999;
p{
font-size: 14px;
font-family: "Microsoft YaHei";
color: rgb(255, 255, 255);
line-heigh
gitextract_ju9w_4mt/ ├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── README.md ├── build/ │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ ├── webpack.prod.conf.js │ └── webpack.test.conf.js ├── config/ │ ├── dev.env.js │ ├── index.js │ ├── prod.env.js │ └── test.env.js ├── index.html ├── package.json ├── src/ │ ├── App.vue │ ├── Index.vue │ ├── SocialDetail.vue │ ├── SocialIndex.vue │ ├── SocialPost.vue │ ├── components/ │ │ ├── DetailLi.vue │ │ ├── Editor.vue │ │ ├── EnlargePicture.vue │ │ ├── IndexList.vue │ │ ├── LoginPop.vue │ │ ├── PeoInfo.vue │ │ ├── SocialIndexAdmin.vue │ │ ├── SocialIndexDetail.vue │ │ ├── SocialIndexHeader.vue │ │ ├── SocialIndexHot.vue │ │ ├── SocialIndexList.vue │ │ ├── SocialIndexRecommend.vue │ │ ├── pagination.vue │ │ └── rulePop.vue │ ├── images/ │ │ ├── thumbnext.cur │ │ └── thumbprev.cur │ ├── main.js │ ├── router/ │ │ └── index.js │ └── sass/ │ ├── .sass-cache/ │ │ ├── 0fe03028bc734e8dfd487f4cec4f99c81c197bf9/ │ │ │ ├── SocialIndexHeader.scssc │ │ │ ├── ie.scssc │ │ │ ├── print.scssc │ │ │ └── screen.scssc │ │ ├── 75fcaf1b4852ceb732871195e41567cc2a7d8997/ │ │ │ └── C%058/ │ │ │ └── Ruby23-x64/ │ │ │ └── lib/ │ │ │ └── ruby/ │ │ │ └── gems/ │ │ │ └── 2.3.0/ │ │ │ └── gems/ │ │ │ └── compass-core-1.0.3/ │ │ │ └── stylesheets/ │ │ │ └── compass/ │ │ │ └── _reset.scssc │ │ ├── 864dd71c7b880940ddbb1315c6bcb890fcda4522/ │ │ │ ├── IndexList.scssc │ │ │ ├── LoginPop.scssc │ │ │ ├── ScoialIndexRecommend - 副本.scssc │ │ │ ├── ScoialIndexRecommend.scssc │ │ │ ├── SocialDetail.scssc │ │ │ ├── SocialIndexAdmin - 副本.scssc │ │ │ ├── SocialIndexAdmin.scssc │ │ │ ├── SocialIndexDetail.scssc │ │ │ ├── SocialIndexHeader - 副本 (2).scssc │ │ │ ├── SocialIndexHeader - 副本 (3).scssc │ │ │ ├── SocialIndexHeader - 副本 (4).scssc │ │ │ ├── SocialIndexHeader.scssc │ │ │ ├── SocialIndexHot - 副本.scssc │ │ │ ├── SocialIndexHot.scssc │ │ │ ├── SocialIndexList - 副本.scssc │ │ │ ├── SocialIndexList.scssc │ │ │ ├── SocialPeoInfo - 副本.scssc │ │ │ ├── SocialPeoInfo.scssc │ │ │ ├── SocialPop.scssc │ │ │ ├── SocialPost.scssc │ │ │ ├── SocialPublic.scssc │ │ │ ├── ie.scssc │ │ │ ├── print.scssc │ │ │ └── screen.scssc │ │ ├── 8b1de0fb964996dfca872842620703baaa5efa9b/ │ │ │ └── _utilities.scssc │ │ ├── c17044e14c0b02252815f0ff968911ec47c759ba/ │ │ │ └── _reset.scssc │ │ └── dc83e2e3df60e99baa08ce8bd69dd4d9b8c8e386/ │ │ ├── ie.scssc │ │ ├── print.scssc │ │ └── screen.scssc │ ├── config.rb │ ├── sass/ │ │ ├── IndexList.scss │ │ ├── LoginPop.scss │ │ ├── ScoialIndexRecommend.scss │ │ ├── SocialDetail.scss │ │ ├── SocialIndexAdmin.scss │ │ ├── SocialIndexDetail.scss │ │ ├── SocialIndexHeader.scss │ │ ├── SocialIndexHot.scss │ │ ├── SocialIndexList.scss │ │ ├── SocialPeoInfo.scss │ │ ├── SocialPop.scss │ │ ├── SocialPost.scss │ │ ├── SocialPublic.scss │ │ ├── ie.scss │ │ ├── print.scss │ │ └── screen.scss │ └── stylesheets/ │ ├── IndexList.css │ ├── LoginPop.css │ ├── ScoialIndexRecommend.css │ ├── SocialDetail.css │ ├── SocialIndexAdmin.css │ ├── SocialIndexDetail.css │ ├── SocialIndexHeader.css │ ├── SocialIndexHot.css │ ├── SocialIndexList.css │ ├── SocialPeoInfo.css │ ├── SocialPop.css │ ├── SocialPost.css │ ├── SocialPublic.css │ ├── ie.css │ ├── print.css │ └── screen.css ├── static/ │ └── .gitkeep ├── test/ │ ├── e2e/ │ │ ├── custom-assertions/ │ │ │ └── elementCount.js │ │ ├── nightwatch.conf.js │ │ ├── runner.js │ │ └── specs/ │ │ └── test.js │ └── unit/ │ ├── .eslintrc │ ├── index.js │ ├── karma.conf.js │ └── specs/ │ └── Hello.spec.js └── webpack.config.js
SYMBOL INDEX (3 symbols across 3 files)
FILE: build/check-versions.js
function exec (line 6) | function exec (cmd) {
FILE: build/utils.js
function generateLoaders (line 25) | function generateLoaders (loader, loaderOptions) {
FILE: build/webpack.base.conf.js
function resolve (line 7) | function resolve (dir) {
Condensed preview — 123 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (373K chars).
[
{
"path": ".babelrc",
"chars": 312,
"preview": "{\n \"presets\": [\n [\"env\", {\n \"modules\": false,\n \"targets\": {\n \"browsers\": [\"> 1%\", \"last 2 versions\""
},
{
"path": ".editorconfig",
"chars": 147,
"preview": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_"
},
{
"path": ".eslintignore",
"chars": 23,
"preview": "build/*.js\nconfig/*.js\n"
},
{
"path": ".eslintrc.js",
"chars": 627,
"preview": "// https://eslint.org/docs/user-guide/configuring\n\nmodule.exports = {\n root: true,\n parser: 'babel-eslint',\n parserOp"
},
{
"path": ".gitignore",
"chars": 208,
"preview": ".DS_Store\nnode_modules/\ndist/\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\ntest/unit/coverage\ntest/e2e/reports\nseleniu"
},
{
"path": ".postcssrc.js",
"chars": 197,
"preview": "// https://github.com/michael-ciniawsky/postcss-load-config\n\nmodule.exports = {\n \"plugins\": {\n // to edit target bro"
},
{
"path": "README.md",
"chars": 1282,
"preview": "#### 前提\n项目需求：建立一个平台能够提供给玩家交流的地方。\n#### 功能需求\n- 一个聚合页面，提供当前最新的帖子\n- 个人模块：显示头像，个人昵称，个人已经加入的主题\n- 热门讨论： 提供热门帖子\n- 主题推荐\n- 主题页面： 显"
},
{
"path": "build/build.js",
"chars": 1102,
"preview": "'use strict'\nrequire('./check-versions')()\n\nprocess.env.NODE_ENV = 'production'\n\nconst ora = require('ora')\nconst rm = r"
},
{
"path": "build/check-versions.js",
"chars": 1285,
"preview": "'use strict'\nconst chalk = require('chalk')\nconst semver = require('semver')\nconst packageConfig = require('../package.j"
},
{
"path": "build/dev-client.js",
"chars": 260,
"preview": "/* eslint-disable */\n'use strict'\nrequire('eventsource-polyfill')\nconst hotClient = require('webpack-hot-middleware/clie"
},
{
"path": "build/dev-server.js",
"chars": 3032,
"preview": "'use strict'\nrequire('./check-versions')()\n\nconst config = require('../config')\nif (!process.env.NODE_ENV) {\n process.e"
},
{
"path": "build/utils.js",
"chars": 1982,
"preview": "'use strict'\nconst path = require('path')\nconst config = require('../config')\nconst ExtractTextPlugin = require('extract"
},
{
"path": "build/vue-loader.conf.js",
"chars": 432,
"preview": "'use strict'\nconst utils = require('./utils')\nconst config = require('../config')\nconst isProduction = process.env.NODE_"
},
{
"path": "build/webpack.base.conf.js",
"chars": 2328,
"preview": "'use strict'\nconst path = require('path')\nconst utils = require('./utils')\nconst config = require('../config')\nconst vue"
},
{
"path": "build/webpack.dev.conf.js",
"chars": 1252,
"preview": "'use strict'\nconst utils = require('./utils')\nconst webpack = require('webpack')\nconst config = require('../config')\ncon"
},
{
"path": "build/webpack.prod.conf.js",
"chars": 4146,
"preview": "'use strict'\nconst path = require('path')\nconst utils = require('./utils')\nconst webpack = require('webpack')\nconst conf"
},
{
"path": "build/webpack.test.conf.js",
"chars": 867,
"preview": "'use strict'\n// This is the webpack config used for unit tests.\n\nconst utils = require('./utils')\nconst webpack = requir"
},
{
"path": "config/dev.env.js",
"chars": 156,
"preview": "'use strict'\nconst merge = require('webpack-merge')\nconst prodEnv = require('./prod.env')\n\nmodule.exports = merge(prodEn"
},
{
"path": "config/index.js",
"chars": 1502,
"preview": "\n'use strict'\n// Template version: 1.1.1\n// see http://vuejs-templates.github.io/webpack for documentation.\n\nconst path "
},
{
"path": "config/prod.env.js",
"chars": 61,
"preview": "'use strict'\nmodule.exports = {\n NODE_ENV: '\"production\"'\n}\n"
},
{
"path": "config/test.env.js",
"chars": 149,
"preview": "'use strict'\nconst merge = require('webpack-merge')\nconst devEnv = require('./dev.env')\n\nmodule.exports = merge(devEnv, "
},
{
"path": "index.html",
"chars": 1389,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\">\n <title>社交圈子</title>\n\t<meta name=\"keywords\" content=\"大型,多人"
},
{
"path": "package.json",
"chars": 2917,
"preview": "{\n \"name\": \"yes\",\n \"version\": \"1.0.0\",\n \"description\": \"A Vue.js project\",\n \"author\": \"PhotoFilm <pianjiao@gmail.com"
},
{
"path": "src/App.vue",
"chars": 1197,
"preview": "<template>\n <div id=\"app\" class=\"app clearfix\">\n <input type=\"hidden\" id=\"pdLogin\" value=\"sdd\"/>\n <router-view :k"
},
{
"path": "src/Index.vue",
"chars": 3151,
"preview": "<template>\n <div id=\"Index\" class=\"Index\">\n <div class=\"SocialIndexMain clearfix\">\n <div class=\"MainList fl "
},
{
"path": "src/SocialDetail.vue",
"chars": 38853,
"preview": "<template>\n <div id=\"SocialDetail\" class=\"SocialDetail\">\n <div class=\"MainList fl\" id=\"MainList\">\n <div clas"
},
{
"path": "src/SocialIndex.vue",
"chars": 4105,
"preview": "<template>\n <div id=\"SocialIndex\" class=\"SocialIndex\">\n <div class=\"SocialIndexHeader bgWhite\" id=\"SocialIndexHeade"
},
{
"path": "src/SocialPost.vue",
"chars": 12698,
"preview": "<template>\n <div id=\"SocialPost\" class=\"SocialPost\">\n <h5 class=\"SP-Hd\">发起讨论</h5>\n <div class=\"SP-Main\">\n <d"
},
{
"path": "src/components/DetailLi.vue",
"chars": 8719,
"preview": "<template>\n <li class=\"clearfix bgWhite ListContUlLi\">\n <div class=\"Jitems\">\n <d"
},
{
"path": "src/components/Editor.vue",
"chars": 1968,
"preview": "<template>\n <div>\n <div id=\"editorElem\" style=\"text-align:left\"></div>\n <span class=\"PostHtml cur\" v-on"
},
{
"path": "src/components/EnlargePicture.vue",
"chars": 1680,
"preview": "<template>\n <div class=\"Jlist-thumb clearfix\" v-if=\"imagesList != ''\" v-show=\"Flag\">\n <div class=\"thumbHd\"><a hr"
},
{
"path": "src/components/IndexList.vue",
"chars": 11155,
"preview": "<template>\n <div class=\"IndexList\" id=\"IndexList\">\n <div class=\"IndexListType clearfix\" id=\"IndexListType\">\n "
},
{
"path": "src/components/LoginPop.vue",
"chars": 2129,
"preview": "<template>\n <div class=\"LoginPop\" id=\"LoginPop\" v-show=\"ispop\">\n <div class=\"LoginPop_outer\">\n <i class=\"LoginP"
},
{
"path": "src/components/PeoInfo.vue",
"chars": 2859,
"preview": "<template>\n <div class=\"PeoInfo bgWhite\" id=\"PeoInfo\" style=\"\">\n <div class=\"onLogin\">\n <div class=\"PeoInfo-Hd\""
},
{
"path": "src/components/SocialIndexAdmin.vue",
"chars": 8568,
"preview": "<template>\n <div id=\"SocialIndexAdmin\" class=\"SocialIndexAdmin bgWhite\">\n <div class=\"MoudleHd\">\n 管理团队\n "
},
{
"path": "src/components/SocialIndexDetail.vue",
"chars": 216,
"preview": "<template>\n <div class=\"\">\n \n </div>\n</template>\n\n<script>\nexport default {\n name: 'HelloWorld',\n data () {\n r"
},
{
"path": "src/components/SocialIndexHeader.vue",
"chars": 3711,
"preview": "<template>\n <div class=\"HdInfo clearfix\">\n <div class=\"SiH-Info fl\" :data-QzId=\"HdInfoData.id\" :data-gameId=\"HdInfoD"
},
{
"path": "src/components/SocialIndexHot.vue",
"chars": 1330,
"preview": "<template>\n <div class=\"SocialIndexHot bgWhite\" id=\"SocialIndexHot\">\n <div class=\"MoudleHd\">\n 热门讨论\n </div>\n "
},
{
"path": "src/components/SocialIndexList.vue",
"chars": 10047,
"preview": "<template>\n <div class=\"SocialIndexList\" id=\"SocialIndexList\">\n <div class=\"IndexListType clearfix\" id=\"IndexListT"
},
{
"path": "src/components/SocialIndexRecommend.vue",
"chars": 4255,
"preview": "<template>\n <div class=\"SocialIndexRecommend bgWhite\" id=\"SocialIndexRecommend\">\n <div class=\"MoudleHd\">\n 圈子推荐\n"
},
{
"path": "src/components/pagination.vue",
"chars": 4956,
"preview": "<template>\n <div class=\"PageBar\" id=\"PageBar\"> \n <ul> \n <li><a :class=\"setButtonClass(0)\" @click=\"prvePage("
},
{
"path": "src/components/rulePop.vue",
"chars": 10702,
"preview": "<template>\n <div class=\"pop\" id=\"pop\">\n <div :class=\"['rulePop Jrule animate', {'pb40':isPopInfo.isPopTsShow == 5}]"
},
{
"path": "src/main.js",
"chars": 511,
"preview": "// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base."
},
{
"path": "src/router/index.js",
"chars": 1155,
"preview": "import Vue from 'vue'\nimport Router from 'vue-router'\nimport Index from '@/Index'\nimport SocialIndex from '@/SocialIndex"
},
{
"path": "src/sass/config.rb",
"chars": 900,
"preview": "require 'compass/import-once/activate'\n# Require any additional compass plugins here.\n\n# Set this to the root of your pr"
},
{
"path": "src/sass/sass/IndexList.scss",
"chars": 12275,
"preview": "@-webkit-keyframes mymove\n{\nfrom {top:0px;}\nto {top:230px;}\n}\n@keyframes mymove\n{\nfrom {top:0px;}\nto {top:230px;}\n}\n@-mo"
},
{
"path": "src/sass/sass/LoginPop.scss",
"chars": 2901,
"preview": ".LoginPop{\n // display: none;\n position: fixed;\n right: 0;\n left: 0;\n top: 220px;\n width: 340px;\n margin: 0 auto;"
},
{
"path": "src/sass/sass/ScoialIndexRecommend.scss",
"chars": 3288,
"preview": ".SocialIndexRecommend{\n width:240px;\n background:#fff;\n top:230px;\n padding:15px 19px;\n margin-bottom: 20px;\n "
},
{
"path": "src/sass/sass/SocialDetail.scss",
"chars": 17420,
"preview": ".SocialDetail{\n position: relative;\n width:100%;\n font-family: \"Microsoft YaHei\";\n .h5{\n height: 100%;\n "
},
{
"path": "src/sass/sass/SocialIndexAdmin.scss",
"chars": 4854,
"preview": ".SocialIndexAdmin{\n padding:15px 19px;\n margin-bottom: 20px;\n width: 240px;\n .SocialIndexAdmin-Cont{\n \t width"
},
{
"path": "src/sass/sass/SocialIndexDetail.scss",
"chars": 1718,
"preview": "\n.SocialIndexHeader{\n width:962px;\n height: 82px;\n background:#fff;\n padding:19px;\n font-family: \"Microsoft Ya"
},
{
"path": "src/sass/sass/SocialIndexHeader.scss",
"chars": 2704,
"preview": ".h5{\n\theight: 100%;\n\tdisplay: inline-block;\n\tcolor:#333;\n}\n.SocialIndexHeader{\n width:962px;\n height: 82px;\n backg"
},
{
"path": "src/sass/sass/SocialIndexHot.scss",
"chars": 1366,
"preview": ".SocialIndexHot{\n padding:15px 19px;\n margin-bottom: 20px;\n width: 240px;\n .HotList{\n \t width:100%;\n \t heigh"
},
{
"path": "src/sass/sass/SocialIndexList.scss",
"chars": 9865,
"preview": "@-webkit-keyframes mymove\n{\nfrom {top:0px;}\nto {top:230px;}\n}\n@keyframes mymove\n{\nfrom {top:0px;}\nto {top:230px;}\n}\n@-mo"
},
{
"path": "src/sass/sass/SocialPeoInfo.scss",
"chars": 4078,
"preview": ".PeoInfo{\n top:0;\n width: 278px;\n min-height: 252px;\n background: #fff url(http://www.iplaystone.com/circle/"
},
{
"path": "src/sass/sass/SocialPop.scss",
"chars": 4300,
"preview": ".pop{\n .divmask{\n position:fixed;\n top:0;\n left:0;\n width:100%;\n height:100%;\n z-index:1000003;\n }\n "
},
{
"path": "src/sass/sass/SocialPost.scss",
"chars": 7585,
"preview": ".SocialPost{\n height: 735px;\n width: 1000px;\n margin:0 auto;\n \n .SP-Hd{\n font-size: 16px;\n font-family: \"Micr"
},
{
"path": "src/sass/sass/SocialPublic.scss",
"chars": 6050,
"preview": "// @import \"compass/reset\";\nbody{\nbackground:#f5f6f8; \nfont-family: \"Microsoft YaHei\";\npadding:0;\nmargin:0;\nbackground:#"
},
{
"path": "src/sass/sass/ie.scss",
"chars": 271,
"preview": "/* Welcome to Compass. Use this file to write IE specific override styles.\n * Import this file using the following HTML "
},
{
"path": "src/sass/sass/print.scss",
"chars": 213,
"preview": "/* Welcome to Compass. Use this file to define print styles.\n * Import this file using the following HTML or equivalent:"
},
{
"path": "src/sass/sass/screen.scss",
"chars": 312,
"preview": "/* Welcome to Compass.\n * In this file you should write your main styles. (or centralize your imports)\n * Import this fi"
},
{
"path": "src/sass/stylesheets/IndexList.css",
"chars": 13972,
"preview": "@-webkit-keyframes mymove {\n from {\n top: 0px;\n }\n to {\n top: 230px;\n }\n}\n@keyframes mymove {\n from {\n top"
},
{
"path": "src/sass/stylesheets/LoginPop.css",
"chars": 3328,
"preview": "/* line 1, ../sass/LoginPop.scss */\n.LoginPop {\n position: fixed;\n right: 0;\n left: 0;\n top: 220px;\n width: 340px;\n"
},
{
"path": "src/sass/stylesheets/ScoialIndexRecommend.css",
"chars": 4099,
"preview": "/* line 1, ../sass/ScoialIndexRecommend.scss */\n.SocialIndexRecommend {\n width: 240px;\n background: #fff;\n top: 230px"
},
{
"path": "src/sass/stylesheets/SocialDetail.css",
"chars": 21051,
"preview": "/* line 1, ../sass/SocialDetail.scss */\n.SocialDetail {\n position: relative;\n width: 100%;\n font-family: \"Microsoft Y"
},
{
"path": "src/sass/stylesheets/SocialIndexAdmin.css",
"chars": 6092,
"preview": "/* line 1, ../sass/SocialIndexAdmin.scss */\n.SocialIndexAdmin {\n padding: 15px 19px;\n margin-bottom: 20px;\n width: 24"
},
{
"path": "src/sass/stylesheets/SocialIndexDetail.css",
"chars": 2483,
"preview": "/* line 2, ../sass/SocialIndexDetail.scss */\n.SocialIndexHeader {\n width: 962px;\n height: 82px;\n background: #fff;\n "
},
{
"path": "src/sass/stylesheets/SocialIndexHeader.css",
"chars": 3915,
"preview": "/* line 1, ../sass/SocialIndexHeader.scss */\n.h5 {\n height: 100%;\n display: inline-block;\n color: #333;\n}\n\n/* line 6,"
},
{
"path": "src/sass/stylesheets/SocialIndexHot.css",
"chars": 1862,
"preview": "/* line 1, ../sass/SocialIndexHot.scss */\n.SocialIndexHot {\n padding: 15px 19px;\n margin-bottom: 20px;\n width: 240px;"
},
{
"path": "src/sass/stylesheets/SocialIndexList.css",
"chars": 11080,
"preview": "@-webkit-keyframes mymove {\n from {\n top: 0px;\n }\n to {\n top: 230px;\n }\n}\n@keyframes mymove {\n from {\n top"
},
{
"path": "src/sass/stylesheets/SocialPeoInfo.css",
"chars": 5019,
"preview": "/* line 1, ../sass/SocialPeoInfo.scss */\n.PeoInfo {\n top: 0;\n width: 278px;\n min-height: 252px;\n background: #fff ur"
},
{
"path": "src/sass/stylesheets/SocialPop.css",
"chars": 5348,
"preview": "/* line 2, ../sass/SocialPop.scss */\n.pop .divmask {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 10"
},
{
"path": "src/sass/stylesheets/SocialPost.css",
"chars": 8945,
"preview": "/* line 1, ../sass/SocialPost.scss */\n.SocialPost {\n height: 735px;\n width: 1000px;\n margin: 0 auto;\n}\n/* line 6, ../"
},
{
"path": "src/sass/stylesheets/SocialPublic.css",
"chars": 8815,
"preview": "/* line 2, ../sass/SocialPublic.scss */\nbody {\n background: #f5f6f8;\n font-family: \"Microsoft YaHei\";\n padding: 0;\n "
},
{
"path": "src/sass/stylesheets/ie.css",
"chars": 271,
"preview": "/* Welcome to Compass. Use this file to write IE specific override styles.\n * Import this file using the following HTML "
},
{
"path": "src/sass/stylesheets/print.css",
"chars": 213,
"preview": "/* Welcome to Compass. Use this file to define print styles.\n * Import this file using the following HTML or equivalent:"
},
{
"path": "src/sass/stylesheets/screen.css",
"chars": 2666,
"preview": "/* Welcome to Compass.\n * In this file you should write your main styles. (or centralize your imports)\n * Import this fi"
},
{
"path": "static/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "test/e2e/custom-assertions/elementCount.js",
"chars": 777,
"preview": "// A custom Nightwatch assertion.\n// the name of the method is the filename.\n// can be used in tests like this:\n//\n// "
},
{
"path": "test/e2e/nightwatch.conf.js",
"chars": 1028,
"preview": "require('babel-register')\nvar config = require('../../config')\n\n// http://nightwatchjs.org/gettingstarted#settings-file\n"
},
{
"path": "test/e2e/runner.js",
"chars": 1086,
"preview": "// 1. start the dev server using production config\nprocess.env.NODE_ENV = 'testing'\nvar server = require('../../build/de"
},
{
"path": "test/e2e/specs/test.js",
"chars": 561,
"preview": "// For authoring Nightwatch tests, see\n// http://nightwatchjs.org/guide#usage\n\nmodule.exports = {\n 'default e2e tests':"
},
{
"path": "test/unit/.eslintrc",
"chars": 95,
"preview": "{\n \"env\": {\n \"mocha\": true\n },\n \"globals\": {\n \"expect\": true,\n \"sinon\": true\n }\n}\n"
},
{
"path": "test/unit/index.js",
"chars": 487,
"preview": "import Vue from 'vue'\n\nVue.config.productionTip = false\n\n// require all test files (files that ends with .spec.js)\nconst"
},
{
"path": "test/unit/karma.conf.js",
"chars": 992,
"preview": "// This is a karma config file. For more details see\n// http://karma-runner.github.io/0.13/config/configuration-file.h"
},
{
"path": "test/unit/specs/Hello.spec.js",
"chars": 355,
"preview": "import Vue from 'vue'\nimport HelloWorld from '@/components/HelloWorld'\n\ndescribe('HelloWorld.vue', () => {\n it('should "
},
{
"path": "webpack.config.js",
"chars": 1419,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
}
]
// ... and 36 more files (download for full content)
About this extraction
This page contains the full source code of the jiaopianjun/social GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 123 files (337.6 KB), approximately 102.6k tokens, and a symbol index with 3 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.